@aiaiai-pt/design-system 0.1.0

package/components/Popover.svelte

@@ -0,0 +1,194 @@
+<!--
+  @component Popover
+
+  Positioned floating content anchored to a trigger element.
+  Uses position: fixed + JS positioning (no CSS Anchor).
+  Consumes --popover-* tokens from components.css.
+
+  @example
+  <button bind:this={anchor} onclick={() => open = !open}>Options</button>
+  <Popover bind:open {anchor} placement="bottom-start">
+    <p>Popover content</p>
+  </Popover>
+
+  @example Match trigger width
+  <Popover bind:open {anchor} matchWidth>
+    <ul>...</ul>
+  </Popover>
+-->
+<script module>
+  let _popoverUid = 0;
+</script>
+
+<script>
+  /**
+   * @typedef {'bottom-start' | 'bottom-end' | 'top-start' | 'top-end'} Placement
+   */
+
+  let {
+    /** @type {boolean} */
+    open = $bindable(false),
+    /** @type {HTMLElement | undefined} */
+    anchor = undefined,
+    /** @type {Placement} */
+    placement = 'bottom-start',
+    /** @type {number} */
+    offset = 4,
+    /** @type {boolean} */
+    matchWidth = false,
+    /** @type {(() => void) | undefined} */
+    onclose = undefined,
+    /** @type {string} */
+    class: className = '',
+    /** @type {import('svelte').Snippet | undefined} */
+    children = undefined,
+    ...rest
+  } = $props();
+
+  const popoverId = `popover-${_popoverUid++}`;
+
+  /** @type {HTMLElement | undefined} */
+  let popoverEl = $state();
+
+  let posX = $state(0);
+  let posY = $state(0);
+  let width = $state(0);
+
+  function reposition() {
+    if (!anchor || !popoverEl) return;
+
+    const rect = anchor.getBoundingClientRect();
+    const popRect = popoverEl.getBoundingClientRect();
+    const viewportH = window.innerHeight;
+    const viewportW = window.innerWidth;
+
+    if (matchWidth) {
+      width = rect.width;
+    }
+
+    const isTop = placement.startsWith('top');
+    const isEnd = placement.endsWith('end');
+
+    let x = isEnd ? rect.right - (matchWidth ? rect.width : popRect.width) : rect.left;
+    let y = isTop ? rect.top - popRect.height - offset : rect.bottom + offset;
+
+    // Flip vertical if out of viewport
+    if (!isTop && y + popRect.height > viewportH) {
+      y = rect.top - popRect.height - offset;
+    } else if (isTop && y < 0) {
+      y = rect.bottom + offset;
+    }
+
+    // Clamp horizontal
+    if (x + popRect.width > viewportW) {
+      x = viewportW - popRect.width - offset;
+    }
+    if (x < 0) x = offset;
+
+    posX = x;
+    posY = y;
+  }
+
+  // Position + close listeners
+  $effect(() => {
+    if (!open || !popoverEl) return;
+
+    requestAnimationFrame(() => reposition());
+
+    /** @type {HTMLElement | null} */
+    const previouslyFocused = /** @type {HTMLElement | null} */ (document.activeElement);
+
+    // Focus first focusable child
+    requestAnimationFrame(() => {
+      const focusable = popoverEl?.querySelector(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      );
+      if (focusable) /** @type {HTMLElement} */ (focusable).focus();
+    });
+
+    /** @param {KeyboardEvent} e */
+    function handleKeydown(e) {
+      if (e.key === 'Escape') {
+        e.stopPropagation();
+        open = false;
+        onclose?.();
+      }
+    }
+
+    /** @param {MouseEvent} e */
+    function handleClickOutside(e) {
+      const target = /** @type {Node} */ (e.target);
+      if (
+        popoverEl &&
+        !popoverEl.contains(target) &&
+        anchor &&
+        !anchor.contains(target)
+      ) {
+        open = false;
+        onclose?.();
+      }
+    }
+
+    function handleScroll() {
+      reposition();
+    }
+
+    document.addEventListener('keydown', handleKeydown);
+    document.addEventListener('mousedown', handleClickOutside);
+    window.addEventListener('scroll', handleScroll, true);
+    window.addEventListener('resize', reposition);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeydown);
+      document.removeEventListener('mousedown', handleClickOutside);
+      window.removeEventListener('scroll', handleScroll, true);
+      window.removeEventListener('resize', reposition);
+      previouslyFocused?.focus();
+    };
+  });
+</script>
+
+{#if open}
+  <div
+    bind:this={popoverEl}
+    id={popoverId}
+    class="popover {className}"
+    role="dialog"
+    style:left="{posX}px"
+    style:top="{posY}px"
+    style:width={matchWidth ? `${width}px` : undefined}
+    {...rest}
+  >
+    {#if children}{@render children()}{/if}
+  </div>
+{/if}
+
+<style>
+  .popover {
+    position: fixed;
+    z-index: var(--popover-z);
+    background: var(--popover-bg);
+    border: var(--popover-border);
+    border-radius: var(--popover-radius);
+    box-shadow: var(--popover-shadow);
+    padding: var(--popover-padding);
+    animation: popover-enter var(--duration-fast) var(--easing-enter);
+  }
+
+  @keyframes popover-enter {
+    from {
+      opacity: 0;
+      transform: translateY(var(--popover-enter-offset));
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .popover {
+      animation: none;
+    }
+  }
+</style>

package/components/Progress.svelte

@@ -0,0 +1,78 @@
+<!--
+  @component Progress
+
+  Determinate or indeterminate progress bar.
+  Consumes --progress-* tokens from components.css.
+
+  @example Determinate
+  <Progress value={65} />
+
+  @example Indeterminate
+  <Progress indeterminate />
+-->
+<script>
+  let {
+    /** @type {number} */
+    value = 0,
+    /** @type {number} */
+    max = 100,
+    /** @type {boolean} */
+    indeterminate = false,
+    /** @type {string} */
+    class: className = '',
+    ...rest
+  } = $props();
+
+  const percentage = $derived(Math.min(Math.max((value / max) * 100, 0), 100));
+</script>
+
+<div
+  class="progress {className}"
+  class:progress-indeterminate={indeterminate}
+  role="progressbar"
+  aria-valuenow={indeterminate ? undefined : value}
+  aria-valuemin={0}
+  aria-valuemax={indeterminate ? undefined : max}
+  {...rest}
+>
+  {#if indeterminate}
+    <div class="progress-fill progress-fill-indeterminate"></div>
+  {:else}
+    <div class="progress-fill" style:width="{percentage}%"></div>
+  {/if}
+</div>
+
+<style>
+  .progress {
+    height: var(--progress-height);
+    background: var(--progress-bg);
+    border-radius: var(--progress-radius);
+    overflow: hidden;
+    width: 100%;
+  }
+
+  .progress-fill {
+    height: 100%;
+    background: var(--progress-fill);
+    border-radius: var(--progress-radius);
+    transition: width var(--progress-transition);
+  }
+
+  .progress-fill-indeterminate {
+    width: 40%;
+    animation: progress-slide var(--progress-indeterminate-duration) var(--easing-linear) infinite;
+  }
+
+  @keyframes progress-slide {
+    0%   { transform: translateX(-100%); }
+    100% { transform: translateX(350%); }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .progress-fill-indeterminate {
+      animation: none;
+      width: 100%;
+      opacity: 0.5;
+    }
+  }
+</style>

package/components/Select.svelte

@@ -0,0 +1,182 @@
+<!--
+  @component Select
+
+  Native select with label, help text, and error state.
+  Consumes --input-* tokens from components.css.
+
+  @example
+  <Select label="COUNTRY" placeholder="Select a country" options={[
+    { value: 'pt', label: 'Portugal' },
+    { value: 'br', label: 'Brazil' },
+  ]} />
+-->
+<script module>
+  let _selectUid = 0;
+</script>
+
+<script>
+  /**
+   * @typedef {{ value: string, label: string, disabled?: boolean }} Option
+   * @typedef {'sm' | 'md' | 'lg'} Size
+   */
+
+  let {
+    /** @type {string | undefined} */
+    label = undefined,
+    /** @type {string | undefined} */
+    placeholder = undefined,
+    /** @type {string} */
+    value = $bindable(''),
+    /** @type {Option[]} */
+    options = [],
+    /** @type {string | undefined} */
+    help = undefined,
+    /** @type {string | undefined} */
+    error = undefined,
+    /** @type {Size} */
+    size = 'md',
+    /** @type {boolean} */
+    disabled = false,
+    /** @type {string | undefined} */
+    id = undefined,
+    /** @type {string} */
+    class: className = '',
+    ...rest
+  } = $props();
+
+  const fallbackId = `select-${_selectUid++}`;
+  const selectId = $derived(id ?? fallbackId);
+  const hintId = $derived(`${selectId}-hint`);
+  const hasHint = $derived(!!error || !!help);
+</script>
+
+<div class="input-group {className}">
+  {#if label}
+    <label class="input-label" for={selectId}>{label}</label>
+  {/if}
+
+  <div class="select-wrapper">
+    <select
+      id={selectId}
+      class="input select input-{size}"
+      class:input-error={!!error}
+      aria-invalid={error ? true : undefined}
+      aria-describedby={hasHint ? hintId : undefined}
+      {disabled}
+      bind:value
+      {...rest}
+    >
+      {#if placeholder}
+        <option value="" disabled>{placeholder}</option>
+      {/if}
+      {#each options as opt}
+        <option value={opt.value} disabled={opt.disabled}>{opt.label}</option>
+      {/each}
+    </select>
+    <span class="select-chevron" aria-hidden="true">
+      <svg width="10" height="6" viewBox="0 0 10 6" fill="none">
+        <path d="M1 1L5 5L9 1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+    </span>
+  </div>
+
+  {#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:focus {
+    outline: none;
+    border: var(--input-border-focus);
+  }
+
+  .input:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .input-error {
+    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);
+  }
+
+  .select {
+    appearance: none;
+    cursor: pointer;
+    padding-right: var(--space-xl);
+  }
+
+  .select-wrapper {
+    position: relative;
+    width: 100%;
+  }
+
+  .select-chevron {
+    position: absolute;
+    right: var(--input-md-padding-x);
+    top: 50%;
+    transform: translateY(-50%);
+    pointer-events: none;
+    display: flex;
+    color: var(--color-text-secondary);
+  }
+
+  .select-chevron svg {
+    width: 10px;
+    height: 6px;
+  }
+</style>

package/components/Separator.svelte

@@ -0,0 +1,47 @@
+<!--
+  @component Separator
+
+  Visual divider between content sections.
+  Consumes --separator-* tokens from components.css.
+
+  @example Horizontal
+  <Separator />
+
+  @example Vertical (inside a flex row)
+  <Separator orientation="vertical" />
+-->
+<script>
+  let {
+    /** @type {'horizontal' | 'vertical'} */
+    orientation = 'horizontal',
+    /** @type {boolean} */
+    decorative = true,
+    /** @type {string} */
+    class: className = '',
+    ...rest
+  } = $props();
+</script>
+
+<div
+  role={decorative ? 'none' : 'separator'}
+  aria-orientation={!decorative ? /** @type {'horizontal' | 'vertical'} */ (orientation) : undefined}
+  class="separator separator-{orientation} {className}"
+  {...rest}
+></div>
+
+<style>
+  .separator {
+    flex-shrink: 0;
+    background: var(--separator-color);
+  }
+
+  .separator-horizontal {
+    height: var(--separator-thickness);
+    width: 100%;
+  }
+
+  .separator-vertical {
+    width: var(--separator-thickness);
+    height: 100%;
+  }
+</style>

package/components/Sidebar.svelte

@@ -0,0 +1,106 @@
+<!--
+  @component Sidebar
+
+  Vertical navigation container with collapsible support.
+  Children (SidebarItem, SidebarSection) read collapsed state via context.
+  Consumes --nav-sidebar-* tokens from components.css.
+
+  @example
+  <Sidebar bind:collapsed>
+    {#snippet header()}
+      <span class="type-label">AIAIAI</span>
+    {/snippet}
+    <SidebarSection title="WORKSPACE" />
+    <SidebarItem href="/dashboard" active>
+      {#snippet icon()}<DashboardIcon />{/snippet}
+      DASHBOARD
+    </SidebarItem>
+  </Sidebar>
+-->
+<script>
+  import { setContext } from 'svelte';
+
+  let {
+    /** @type {boolean} */
+    collapsed = $bindable(false),
+    /** @type {string} */
+    class: className = '',
+    /** @type {import('svelte').Snippet | undefined} */
+    header = undefined,
+    /** @type {import('svelte').Snippet | undefined} */
+    footer = undefined,
+    /** @type {import('svelte').Snippet | undefined} */
+    children = undefined,
+    ...rest
+  } = $props();
+
+  setContext('aiaiai-sidebar', {
+    get collapsed() { return collapsed; }
+  });
+</script>
+
+<aside
+  class="sidebar {className}"
+  class:sidebar-collapsed={collapsed}
+  {...rest}
+>
+  {#if header}
+    <div class="sidebar-header">
+      {@render header()}
+    </div>
+  {/if}
+
+  <nav class="sidebar-nav">
+    {#if children}{@render children()}{/if}
+  </nav>
+
+  {#if footer}
+    <div class="sidebar-footer">
+      {@render footer()}
+    </div>
+  {/if}
+</aside>
+
+<style>
+  .sidebar {
+    width: var(--nav-sidebar-width);
+    min-width: var(--nav-sidebar-width);
+    background: var(--nav-sidebar-bg);
+    border-right: var(--nav-sidebar-border);
+    padding: var(--nav-sidebar-padding);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-sm);
+    transition: width var(--duration-slow) var(--easing-default),
+                min-width var(--duration-slow) var(--easing-default);
+  }
+
+  .sidebar-collapsed {
+    width: var(--nav-sidebar-width-collapsed);
+    min-width: var(--nav-sidebar-width-collapsed);
+  }
+
+  .sidebar-header {
+    display: flex;
+    align-items: baseline;
+    gap: var(--space-sm);
+    padding: var(--space-sm);
+    border-bottom: var(--elevation-border);
+    padding-bottom: var(--space-md);
+    flex-shrink: 0;
+  }
+
+  .sidebar-nav {
+    display: flex;
+    flex-direction: column;
+    gap: var(--border-width);
+    flex: 1;
+    overflow-y: auto;
+  }
+
+  .sidebar-footer {
+    flex-shrink: 0;
+    border-top: var(--elevation-border);
+    padding-top: var(--space-sm);
+  }
+</style>