@aiaiai-pt/design-system 0.1.0

package/components/SidebarItem.svelte

@@ -0,0 +1,154 @@
+<!--
+  @component SidebarItem
+
+  Navigation item for use inside Sidebar.
+  Reads collapsed state from Sidebar context — hides label and badge when collapsed.
+  Consumes --nav-item-* tokens from components.css.
+
+  @example Button
+  <SidebarItem active onclick={() => navigate('/')}>
+    {#snippet icon()}<svg>...</svg>{/snippet}
+    DASHBOARD
+  </SidebarItem>
+
+  @example Link
+  <SidebarItem href="/settings">
+    {#snippet icon()}<svg>...</svg>{/snippet}
+    SETTINGS
+  </SidebarItem>
+
+  @example With badge
+  <SidebarItem href="/inbox" badge={3}>
+    {#snippet icon()}<svg>...</svg>{/snippet}
+    INBOX
+  </SidebarItem>
+-->
+<script>
+  import { getContext } from 'svelte';
+
+  let {
+    /** @type {boolean} */
+    active = false,
+    /** @type {boolean} */
+    disabled = false,
+    /** @type {string | undefined} */
+    href = undefined,
+    /** @type {string | number | undefined} */
+    badge = undefined,
+    /** @type {string} */
+    class: className = '',
+    /** @type {import('svelte').Snippet | undefined} */
+    icon = undefined,
+    /** @type {import('svelte').Snippet | undefined} */
+    children = undefined,
+    ...rest
+  } = $props();
+
+  const sidebar = getContext('aiaiai-sidebar');
+  const isCollapsed = $derived(sidebar?.collapsed ?? false);
+</script>
+
+{#if href && !disabled}
+  <a
+    {href}
+    class="nav-item {className}"
+    class:nav-item-active={active}
+    aria-current={active ? 'page' : undefined}
+    {...rest}
+  >
+    {#if icon}<span class="nav-icon-wrap">{@render icon()}</span>{/if}
+    {#if !isCollapsed}
+      {#if children}<span class="nav-item-label">{@render children()}</span>{/if}
+      {#if badge != null}<span class="nav-badge">{badge}</span>{/if}
+    {/if}
+  </a>
+{:else}
+  <button
+    class="nav-item {className}"
+    class:nav-item-active={active}
+    class:nav-item-disabled={disabled}
+    {disabled}
+    aria-current={active ? 'page' : undefined}
+    {...rest}
+  >
+    {#if icon}<span class="nav-icon-wrap">{@render icon()}</span>{/if}
+    {#if !isCollapsed}
+      {#if children}<span class="nav-item-label">{@render children()}</span>{/if}
+      {#if badge != null}<span class="nav-badge">{badge}</span>{/if}
+    {/if}
+  </button>
+{/if}
+
+<style>
+  .nav-item {
+    all: unset;
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    height: var(--nav-item-height);
+    padding: 0 var(--nav-item-padding-x);
+    border-radius: var(--nav-item-radius);
+    font-family: var(--nav-item-font);
+    font-size: var(--nav-item-font-size);
+    letter-spacing: var(--nav-item-tracking);
+    color: var(--nav-item-color);
+    cursor: pointer;
+    transition: all var(--nav-item-transition);
+    text-decoration: none;
+    box-sizing: border-box;
+  }
+
+  .nav-item:hover {
+    color: var(--nav-item-color-hover);
+    background: var(--nav-item-bg-hover);
+  }
+
+  .nav-item:focus-visible {
+    outline: var(--focus-ring-width) solid var(--focus-ring-color);
+    outline-offset: var(--focus-ring-offset);
+  }
+
+  .nav-item-active {
+    color: var(--nav-item-color-active);
+    background: var(--nav-item-bg-active);
+  }
+
+  .nav-item-disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  .nav-icon-wrap {
+    display: flex;
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+  }
+
+  .nav-icon-wrap :global(svg) {
+    width: 100%;
+    height: 100%;
+  }
+
+  .nav-item-label {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .nav-badge {
+    font-family: var(--type-data-font);
+    font-size: var(--type-caption-size);
+    background: var(--color-accent);
+    color: var(--color-text-on-accent);
+    border-radius: var(--radius-pill);
+    padding: 0 var(--space-xs);
+    min-width: 18px;
+    height: 18px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: auto;
+  }
+</style>

package/components/SidebarSection.svelte

@@ -0,0 +1,43 @@
+<!--
+  @component SidebarSection
+
+  Section header for grouping sidebar items.
+  Hidden when Sidebar is collapsed (reads context).
+  Consumes --nav-section-* tokens from components.css.
+
+  @example
+  <SidebarSection title="WORKSPACE" />
+-->
+<script>
+  import { getContext } from 'svelte';
+
+  let {
+    /** @type {string} */
+    title,
+    /** @type {string} */
+    class: className = '',
+    ...rest
+  } = $props();
+
+  const sidebar = getContext('aiaiai-sidebar');
+  const isCollapsed = $derived(sidebar?.collapsed ?? false);
+</script>
+
+{#if !isCollapsed}
+  <span class="nav-section {className}" {...rest}>{title}</span>
+{/if}
+
+<style>
+  .nav-section {
+    font-family: var(--nav-section-font);
+    font-size: var(--nav-section-size);
+    letter-spacing: var(--nav-section-tracking);
+    color: var(--nav-section-color);
+    padding: var(--space-sm) var(--space-sm) var(--space-xs);
+    margin-top: var(--nav-section-margin-top);
+  }
+
+  .nav-section:first-child {
+    margin-top: 0;
+  }
+</style>

package/components/Skeleton.svelte

@@ -0,0 +1,79 @@
+<!--
+  @component Skeleton
+
+  Loading placeholder with shimmer animation.
+  Consumes --skeleton-* tokens from components.css.
+
+  @example Text line
+  <Skeleton width="80%" height="16px" />
+
+  @example Circle (avatar)
+  <Skeleton width="40px" height="40px" circle />
+
+  @example Card
+  <Skeleton width="100%" height="120px" radius="var(--radius-md)" />
+-->
+<script>
+  let {
+    /** @type {string} */
+    width = '100%',
+    /** @type {string} */
+    height = '16px',
+    /** @type {boolean} */
+    circle = false,
+    /** @type {string | undefined} */
+    radius = undefined,
+    /** @type {string} */
+    class: className = '',
+    ...rest
+  } = $props();
+
+  const borderRadius = $derived(circle
+    ? 'var(--radius-circle)'
+    : radius ?? 'var(--skeleton-radius)');
+</script>
+
+<div
+  class="skeleton {className}"
+  style:width={width}
+  style:height={height}
+  style:border-radius={borderRadius}
+  aria-hidden="true"
+  {...rest}
+></div>
+
+<style>
+  .skeleton {
+    background: var(--skeleton-bg);
+    position: relative;
+    overflow: hidden;
+  }
+
+  .skeleton::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+      90deg,
+      transparent,
+      var(--skeleton-shine),
+      transparent
+    );
+    animation: shimmer var(--skeleton-duration) infinite;
+  }
+
+  @keyframes shimmer {
+    100% {
+      left: 100%;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .skeleton::after {
+      animation: none;
+    }
+  }
+</style>

package/components/Status.svelte

@@ -0,0 +1,104 @@
+<!--
+  @component Status
+
+  Colored indicator dot with label. Used for real-time status, health, presence.
+  Consumes --status-* tokens from components.css.
+
+  Dot shapes encode meaning: circle=success, triangle=warning, diamond=error, ring=inactive.
+
+  @example
+  <Status variant="success">ACTIVE</Status>
+
+  @example Pulsing
+  <Status variant="warning" pulse>DEGRADED</Status>
+-->
+<script>
+  /**
+   * @typedef {'success' | 'warning' | 'error' | 'inactive'} Variant
+   */
+
+  let {
+    /** @type {Variant} */
+    variant = 'success',
+    /** @type {boolean} */
+    pulse = false,
+    /** @type {string} */
+    class: className = '',
+    /** @type {import('svelte').Snippet | undefined} */
+    children = undefined,
+    ...rest
+  } = $props();
+
+  /** @type {Record<string, string>} */
+  const colorMap = {
+    success: 'var(--color-success)',
+    warning: 'var(--color-warning)',
+    error: 'var(--color-destructive)',
+    inactive: 'var(--color-text-muted)',
+  };
+</script>
+
+<span class="status {className}" {...rest}>
+  <span
+    class="status-dot status-dot-{variant}"
+    class:status-dot-pulse={pulse}
+    style:background={variant !== 'inactive' ? colorMap[variant] : undefined}
+    style:color={variant === 'inactive' ? colorMap[variant] : undefined}
+    aria-hidden="true"
+  ></span>
+  {#if children}
+    <span class="status-label">{@render children()}</span>
+  {/if}
+</span>
+
+<style>
+  .status {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--status-gap);
+  }
+
+  .status-dot {
+    width: var(--status-dot-size);
+    height: var(--status-dot-size);
+    border-radius: var(--radius-circle);
+    flex-shrink: 0;
+  }
+
+  /* Shape variants: progressive enhancement over base circle */
+  .status-dot-warning {
+    border-radius: 0;
+    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
+  }
+
+  .status-dot-error {
+    border-radius: 0;
+    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
+  }
+
+  .status-dot-inactive {
+    background: transparent !important;
+    box-shadow: inset 0 0 0 2px currentColor;
+  }
+
+  .status-dot-pulse {
+    animation: pulse 2s ease-in-out infinite;
+  }
+
+  @keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.4; }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .status-dot-pulse {
+      animation: none;
+    }
+  }
+
+  .status-label {
+    font-family: var(--status-font);
+    font-size: var(--status-size);
+    letter-spacing: var(--type-label-tracking);
+  }
+</style>

package/components/Stepper.svelte

@@ -0,0 +1,142 @@
+<!--
+  @component Stepper
+
+  Horizontal step indicator for multi-step flows.
+  Consumes --stepper-* tokens from components.css.
+
+  @example
+  <Stepper steps={[
+    { label: 'Source', status: 'complete' },
+    { label: 'Configure', status: 'active' },
+    { label: 'Review', status: 'upcoming' },
+  ]} />
+-->
+<script>
+  /**
+   * @typedef {'complete' | 'active' | 'upcoming'} StepStatus
+   * @typedef {{ label: string, status: StepStatus }} Step
+   */
+
+  let {
+    /** @type {Step[]} */
+    steps = [],
+    /** @type {string} */
+    class: className = '',
+    ...rest
+  } = $props();
+</script>
+
+<nav class="stepper {className}" aria-label="Progress" {...rest}>
+  {#each steps as step, i}
+    {#if i > 0}
+      <div
+        class="stepper-line"
+        class:stepper-line-complete={step.status === 'complete' || step.status === 'active'}
+      ></div>
+    {/if}
+
+    <div class="stepper-step" aria-current={step.status === 'active' ? 'step' : undefined}>
+      <div
+        class="stepper-dot"
+        class:stepper-dot-active={step.status === 'active'}
+        class:stepper-dot-complete={step.status === 'complete'}
+      >
+        {#if step.status === 'complete'}
+          <svg class="stepper-check" 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}
+          <span class="stepper-number">{i + 1}</span>
+        {/if}
+      </div>
+
+      <span
+        class="stepper-label"
+        class:stepper-label-active={step.status === 'active'}
+        class:stepper-label-complete={step.status === 'complete'}
+      >{step.label}</span>
+    </div>
+  {/each}
+</nav>
+
+<style>
+  .stepper {
+    display: flex;
+    align-items: center;
+    gap: var(--stepper-gap);
+  }
+
+  .stepper-step {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--stepper-gap);
+    flex-shrink: 0;
+  }
+
+  .stepper-dot {
+    width: var(--stepper-dot-size);
+    height: var(--stepper-dot-size);
+    border-radius: var(--radius-circle);
+    background: var(--stepper-dot-bg);
+    border: var(--stepper-dot-border);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all var(--stepper-transition);
+  }
+
+  .stepper-dot-active {
+    background: var(--stepper-active-bg);
+    color: var(--stepper-active-color);
+  }
+
+  .stepper-dot-complete {
+    background: var(--stepper-complete-bg);
+    color: var(--stepper-complete-color);
+  }
+
+  .stepper-number {
+    font-family: var(--stepper-dot-font);
+    font-size: var(--stepper-dot-size-text);
+    letter-spacing: var(--stepper-dot-tracking);
+    color: var(--stepper-dot-color);
+  }
+
+  .stepper-dot-active .stepper-number {
+    color: var(--stepper-active-color);
+  }
+
+  .stepper-check {
+    width: 12px;
+    height: 12px;
+  }
+
+  .stepper-label {
+    font-family: var(--stepper-label-font);
+    font-size: var(--stepper-label-size);
+    letter-spacing: var(--stepper-label-tracking);
+    color: var(--stepper-label-color);
+    white-space: nowrap;
+  }
+
+  .stepper-label-active {
+    color: var(--stepper-label-active-color);
+  }
+
+  .stepper-label-complete {
+    color: var(--stepper-label-active-color);
+  }
+
+  .stepper-line {
+    flex: 1;
+    height: var(--stepper-line-width);
+    background: var(--stepper-line-color);
+    min-width: 24px;
+    margin-bottom: calc(var(--stepper-label-size) + var(--stepper-gap));
+  }
+
+  .stepper-line-complete {
+    background: var(--stepper-complete-bg);
+  }
+</style>

package/components/Tab.svelte

@@ -0,0 +1,94 @@
+<!--
+  @component Tab
+
+  Individual tab trigger inside a TabList.
+  Reads active state from Tabs context.
+  Consumes --tabs-trigger-* tokens from components.css.
+
+  @example
+  <Tab value="overview">OVERVIEW</Tab>
+
+  @example Disabled
+  <Tab value="admin" disabled>ADMIN</Tab>
+-->
+<script>
+  import { getContext } from 'svelte';
+
+  let {
+    /** @type {string} */
+    value,
+    /** @type {boolean} */
+    disabled = false,
+    /** @type {string} */
+    class: className = '',
+    /** @type {import('svelte').Snippet | undefined} */
+    children = undefined,
+    ...rest
+  } = $props();
+
+  /** @type {{ value: string, setValue: (v: string) => void } | undefined} */
+  const tabs = getContext('tabs');
+  const isActive = $derived(tabs?.value === value);
+
+  function handleClick() {
+    if (disabled) return;
+    if (!tabs) {
+      console.warn('[aiaiai] <Tab> used outside <Tabs> — wrap in a <Tabs> parent.');
+      return;
+    }
+    tabs.setValue(value);
+  }
+</script>
+
+<button
+  type="button"
+  role="tab"
+  aria-selected={isActive}
+  {disabled}
+  class="tab {className}"
+  class:tab-active={isActive}
+  onclick={handleClick}
+  {...rest}
+>
+  {#if children}{@render children()}{/if}
+</button>
+
+<style>
+  .tab {
+    all: unset;
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: var(--tabs-trigger-height);
+    padding: 0 var(--tabs-trigger-padding-x);
+    border-radius: var(--tabs-trigger-radius);
+    font-family: var(--tabs-trigger-font);
+    font-size: var(--tabs-trigger-size);
+    letter-spacing: var(--tabs-trigger-tracking);
+    color: var(--tabs-trigger-color);
+    cursor: pointer;
+    transition: all var(--tabs-trigger-transition);
+    white-space: nowrap;
+  }
+
+  .tab:hover:not(:disabled) {
+    color: var(--color-text);
+  }
+
+  .tab:focus-visible {
+    outline: var(--focus-ring-width) solid var(--focus-ring-color);
+    outline-offset: var(--focus-ring-offset);
+  }
+
+  .tab:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .tab-active {
+    color: var(--tabs-trigger-color-active);
+    background: var(--tabs-trigger-bg-active);
+    box-shadow: var(--tabs-trigger-shadow-active);
+  }
+</style>

package/components/TabList.svelte

@@ -0,0 +1,36 @@
+<!--
+  @component TabList
+
+  Horizontal bar containing Tab triggers.
+  Consumes --tabs-list-* tokens from components.css.
+
+  @example
+  <TabList>
+    <Tab value="one">ONE</Tab>
+    <Tab value="two">TWO</Tab>
+  </TabList>
+-->
+<script>
+  let {
+    /** @type {string} */
+    class: className = '',
+    /** @type {import('svelte').Snippet | undefined} */
+    children = undefined,
+    ...rest
+  } = $props();
+</script>
+
+<div class="tab-list {className}" role="tablist" {...rest}>
+  {#if children}{@render children()}{/if}
+</div>
+
+<style>
+  .tab-list {
+    display: inline-flex;
+    align-items: center;
+    background: var(--tabs-list-bg);
+    border-radius: var(--tabs-list-radius);
+    padding: var(--tabs-list-padding);
+    gap: var(--space-2xs);
+  }
+</style>

package/components/TabPanel.svelte

@@ -0,0 +1,45 @@
+<!--
+  @component TabPanel
+
+  Content panel shown when its matching Tab is active.
+  Reads active state from Tabs context.
+  Consumes --tabs-content-* tokens from components.css.
+
+  @example
+  <TabPanel value="overview">
+    Overview content goes here.
+  </TabPanel>
+-->
+<script>
+  import { getContext } from 'svelte';
+
+  let {
+    /** @type {string} */
+    value,
+    /** @type {string} */
+    class: className = '',
+    /** @type {import('svelte').Snippet | undefined} */
+    children = undefined,
+    ...rest
+  } = $props();
+
+  /** @type {{ value: string, setValue: (v: string) => void } | undefined} */
+  const tabs = getContext('tabs');
+  const isActive = $derived(tabs?.value === value);
+</script>
+
+{#if isActive}
+  <div
+    role="tabpanel"
+    class="tab-panel {className}"
+    {...rest}
+  >
+    {#if children}{@render children()}{/if}
+  </div>
+{/if}
+
+<style>
+  .tab-panel {
+    padding-top: var(--tabs-content-padding-top);
+  }
+</style>