@aiaiai-pt/design-system 0.1.0

package/components/Alert.svelte

@@ -0,0 +1,100 @@
+<!--
+  @component Alert
+
+  Inline callout for contextual messages.
+  Unlike Toast (floating, transient), Alert is in-flow and persistent.
+  Consumes --alert-* tokens from components.css.
+
+  @example Info
+  <Alert variant="info">
+    <strong>Note:</strong> This pipeline requires a source connection.
+  </Alert>
+
+  @example Error with icon
+  <Alert variant="error">
+    {#snippet icon()}<svg>...</svg>{/snippet}
+    <strong>Build failed.</strong> Check the CI logs for details.
+  </Alert>
+-->
+<script>
+  /**
+   * @typedef {'info' | 'success' | 'warning' | 'error'} Variant
+   */
+
+  let {
+    /** @type {Variant} */
+    variant = 'info',
+    /** @type {string} */
+    class: className = '',
+    /** @type {import('svelte').Snippet | undefined} */
+    icon = undefined,
+    /** @type {import('svelte').Snippet | undefined} */
+    children = undefined,
+    ...rest
+  } = $props();
+
+  /** @type {Record<string, string>} */
+  const accentColors = {
+    info: 'var(--color-info)',
+    success: 'var(--color-success)',
+    warning: 'var(--color-warning)',
+    error: 'var(--color-destructive)',
+  };
+</script>
+
+<div
+  class="alert {className}"
+  role={variant === 'error' ? 'alert' : 'status'}
+  {...rest}
+>
+  <div class="alert-accent" style:background={accentColors[variant]}></div>
+  <div class="alert-content">
+    {#if icon}
+      <span class="alert-icon" aria-hidden="true">{@render icon()}</span>
+    {/if}
+    <div class="alert-body">
+      {#if children}{@render children()}{/if}
+    </div>
+  </div>
+</div>
+
+<style>
+  .alert {
+    display: flex;
+    overflow: hidden;
+    border-radius: var(--alert-radius);
+    border: var(--alert-border);
+    background: var(--alert-bg);
+  }
+
+  .alert-accent {
+    width: var(--accent-stripe-width);
+    flex-shrink: 0;
+  }
+
+  .alert-content {
+    padding: var(--alert-padding);
+    display: flex;
+    gap: var(--space-sm);
+    flex: 1;
+  }
+
+  .alert-icon {
+    display: flex;
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+    margin-top: 2px;
+  }
+
+  .alert-icon :global(svg) {
+    width: 100%;
+    height: 100%;
+  }
+
+  .alert-body {
+    font-family: var(--alert-font);
+    font-size: var(--alert-font-size);
+    flex: 1;
+  }
+</style>

package/components/Badge.svelte

@@ -0,0 +1,108 @@
+<!--
+  @component Badge
+
+  Semantic status label. Pill-shaped, mono font, color-coded.
+  Consumes --badge-* tokens from components.css.
+
+  @example
+  <Badge variant="success">PASSED</Badge>
+
+  @example With dot
+  <Badge variant="info" dot>SYNCING</Badge>
+-->
+<script>
+  /**
+   * @typedef {'neutral' | 'info' | 'success' | 'warning' | 'error' | 'outline'} Variant
+   */
+
+  let {
+    /** @type {Variant} */
+    variant = 'neutral',
+    /** @type {boolean} */
+    dot = false,
+    /** @type {string} */
+    class: className = '',
+    /** @type {import('svelte').Snippet | undefined} */
+    icon = undefined,
+    /** @type {import('svelte').Snippet | undefined} */
+    children = undefined,
+    ...rest
+  } = $props();
+</script>
+
+<span class="badge badge-{variant} {className}" {...rest}>
+  {#if dot}
+    <span class="badge-dot" aria-hidden="true"></span>
+  {/if}
+  {#if icon}
+    <span class="badge-icon-wrap">{@render icon()}</span>
+  {/if}
+  {#if children}
+    {@render children()}
+  {/if}
+</span>
+
+<style>
+  .badge {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-xs);
+    font-family: var(--badge-font);
+    font-size: var(--badge-size);
+    letter-spacing: var(--badge-tracking);
+    border-radius: var(--badge-radius);
+    padding: var(--badge-padding-y) var(--badge-padding-x);
+    white-space: nowrap;
+  }
+
+  .badge-neutral {
+    background: var(--badge-neutral-bg);
+    color: var(--badge-neutral-text);
+  }
+
+  .badge-info {
+    background: var(--color-info-subtle);
+    color: var(--color-info);
+  }
+
+  .badge-success {
+    background: var(--color-success-subtle);
+    color: var(--color-success);
+  }
+
+  .badge-warning {
+    background: var(--color-warning-subtle);
+    color: var(--color-warning);
+  }
+
+  .badge-error {
+    background: var(--color-destructive-subtle);
+    color: var(--color-destructive);
+  }
+
+  .badge-outline {
+    background: transparent;
+    color: var(--color-text);
+    border: var(--border-width) solid var(--color-border);
+  }
+
+  .badge-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: var(--radius-circle);
+    background: currentColor;
+    flex-shrink: 0;
+  }
+
+  .badge-icon-wrap {
+    display: flex;
+    width: 12px;
+    height: 12px;
+    flex-shrink: 0;
+  }
+
+  .badge-icon-wrap :global(svg) {
+    width: 100%;
+    height: 100%;
+  }
+</style>

package/components/BottomNav.svelte

@@ -0,0 +1,37 @@
+<!--
+  @component BottomNav
+
+  Mobile bottom navigation bar.
+  Consumes --nav-bottom-* tokens from components.css.
+
+  @example
+  <BottomNav>
+    <BottomNavItem active label="Home">
+      {#snippet icon()}<svg>...</svg>{/snippet}
+    </BottomNavItem>
+  </BottomNav>
+-->
+<script>
+  let {
+    /** @type {string} */
+    class: className = '',
+    /** @type {import('svelte').Snippet | undefined} */
+    children = undefined,
+    ...rest
+  } = $props();
+</script>
+
+<nav class="bottom-nav {className}" {...rest}>
+  {#if children}{@render children()}{/if}
+</nav>
+
+<style>
+  .bottom-nav {
+    height: var(--nav-bottom-height);
+    background: var(--nav-bottom-bg);
+    border-top: var(--nav-bottom-border-top);
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+  }
+</style>

package/components/BottomNavItem.svelte

@@ -0,0 +1,121 @@
+<!--
+  @component BottomNavItem
+
+  Individual item in a BottomNav.
+  Consumes --nav-bottom-* tokens from components.css.
+
+  @example
+  <BottomNavItem active label="Home" onclick={() => goto('/')}>
+    {#snippet icon()}<svg>...</svg>{/snippet}
+  </BottomNavItem>
+
+  @example With badge dot
+  <BottomNavItem label="Activity" badge>
+    {#snippet icon()}<svg>...</svg>{/snippet}
+  </BottomNavItem>
+-->
+<script>
+  let {
+    /** @type {boolean} */
+    active = false,
+    /** @type {boolean} */
+    disabled = false,
+    /** @type {string | undefined} */
+    href = undefined,
+    /** @type {string} */
+    label,
+    /** @type {boolean} */
+    badge = false,
+    /** @type {string} */
+    class: className = '',
+    /** @type {import('svelte').Snippet | undefined} */
+    icon = undefined,
+    ...rest
+  } = $props();
+</script>
+
+{#if href && !disabled}
+  <a
+    {href}
+    class="bottom-nav-item {className}"
+    class:bottom-nav-active={active}
+    aria-current={active ? 'page' : undefined}
+    {...rest}
+  >
+    <div class="bottom-nav-icon-wrap">
+      {#if icon}{@render icon()}{/if}
+      {#if badge}<span class="bottom-nav-badge" aria-hidden="true"></span>{/if}
+    </div>
+    <span class="bottom-nav-label">{label}</span>
+  </a>
+{:else}
+  <button
+    class="bottom-nav-item {className}"
+    class:bottom-nav-active={active}
+    class:bottom-nav-disabled={disabled}
+    {disabled}
+    aria-current={active ? 'page' : undefined}
+    {...rest}
+  >
+    <div class="bottom-nav-icon-wrap">
+      {#if icon}{@render icon()}{/if}
+      {#if badge}<span class="bottom-nav-badge" aria-hidden="true"></span>{/if}
+    </div>
+    <span class="bottom-nav-label">{label}</span>
+  </button>
+{/if}
+
+<style>
+  .bottom-nav-item {
+    all: unset;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--space-2xs);
+    cursor: pointer;
+    color: var(--nav-bottom-item-color);
+    transition: color var(--duration-instant) var(--easing-default);
+    padding: var(--space-xs);
+    text-decoration: none;
+  }
+
+  .bottom-nav-item:focus-visible {
+    outline: var(--focus-ring-width) solid var(--focus-ring-color);
+    outline-offset: var(--focus-ring-offset);
+  }
+
+  .bottom-nav-active {
+    color: var(--nav-bottom-item-color-active);
+  }
+
+  .bottom-nav-disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  .bottom-nav-icon-wrap {
+    position: relative;
+    display: flex;
+  }
+
+  .bottom-nav-icon-wrap :global(svg) {
+    width: 20px;
+    height: 20px;
+  }
+
+  .bottom-nav-badge {
+    position: absolute;
+    top: -2px;
+    right: -4px;
+    width: var(--status-dot-size);
+    height: var(--status-dot-size);
+    background: var(--color-accent);
+    border-radius: var(--radius-circle);
+  }
+
+  .bottom-nav-label {
+    font-family: var(--nav-bottom-item-font);
+    font-size: var(--nav-bottom-item-size);
+  }
+</style>

package/components/Button.svelte

@@ -0,0 +1,269 @@
+<!--
+  @component Button
+
+  Four variants, three sizes. Labels always mono (Berkeley Mono).
+  Renders as `<a>` when `href` is provided, `<button>` otherwise.
+  Consumes --button-* tokens from components.css.
+
+  @example
+  <Button variant="primary" size="md">CREATE</Button>
+
+  @example With icon
+  <Button variant="secondary" size="sm">
+    {#snippet icon()}<PhPlus size={16} />{/snippet}
+    ADD ITEM
+  </Button>
+
+  @example As link
+  <Button variant="secondary" size="sm" href="/some/path">
+    GO THERE
+  </Button>
+
+  @example Loading
+  <Button variant="primary" loading>SAVING</Button>
+
+  @example Icon only
+  <Button variant="ghost" size="md" iconOnly aria-label="Settings">
+    {#snippet icon()}<PhGear size={16} />{/snippet}
+  </Button>
+-->
+<script>
+  /**
+   * @typedef {'primary' | 'secondary' | 'ghost' | 'destructive'} Variant
+   * @typedef {'sm' | 'md' | 'lg'} Size
+   * @typedef {'button' | 'submit' | 'reset'} ButtonType
+   */
+
+  let {
+    /** @type {Variant} */
+    variant = 'primary',
+    /** @type {Size} */
+    size = 'md',
+    /** @type {boolean} */
+    loading = false,
+    /** @type {boolean} */
+    disabled = false,
+    /** @type {boolean} */
+    iconOnly = false,
+    /** @type {ButtonType} */
+    type = 'button',
+    /** @type {string | undefined} */
+    href = undefined,
+    /** @type {string} */
+    class: className = '',
+    /** @type {import('svelte').Snippet | undefined} */
+    icon = undefined,
+    /** @type {import('svelte').Snippet | undefined} */
+    children = undefined,
+    ...rest
+  } = $props();
+
+  /** @type {'button' | 'submit' | 'reset'} — cast needed for svelte-check on <button type> */
+  const buttonType = $derived(/** @type {'button' | 'submit' | 'reset'} */ (type));
+  const classes = $derived(`btn btn-${variant} btn-${size} ${iconOnly ? 'btn-icon-only' : ''} ${className}`.trim());
+</script>
+
+{#snippet content()}
+  {#if loading}
+    <span class="spinner" aria-hidden="true"></span>
+  {/if}
+  {#if icon && !loading}
+    <span class="btn-icon-wrap">{@render icon()}</span>
+  {/if}
+  {#if children}
+    <span class="btn-label">{@render children()}</span>
+  {/if}
+{/snippet}
+
+{#if href && !disabled}
+  <a
+    {href}
+    class={classes}
+    aria-busy={loading || undefined}
+    {...rest}
+  >
+    {@render content()}
+  </a>
+{:else}
+  <button
+    type={buttonType}
+    class={classes}
+    disabled={disabled || loading}
+    aria-busy={loading || undefined}
+    {...rest}
+  >
+    {@render content()}
+  </button>
+{/if}
+
+<style>
+  /* ─── Base ─── */
+  .btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-xs);
+    font-family: var(--button-font);
+    letter-spacing: var(--button-tracking);
+    border-radius: var(--button-radius);
+    border: none;
+    cursor: pointer;
+    transition: all var(--button-transition);
+    white-space: nowrap;
+    text-decoration: none;
+  }
+
+  .btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .btn:focus-visible {
+    outline: var(--focus-ring-width) solid var(--focus-ring-color);
+    outline-offset: var(--focus-ring-offset);
+  }
+
+  /* ─── Sizes ─── */
+  .btn-sm {
+    height: var(--button-sm-height);
+    padding: 0 var(--button-sm-padding-x);
+    font-size: var(--button-sm-font-size);
+  }
+
+  .btn-md {
+    height: var(--button-md-height);
+    padding: 0 var(--button-md-padding-x);
+    font-size: var(--button-md-font-size);
+  }
+
+  .btn-lg {
+    height: var(--button-lg-height);
+    padding: 0 var(--button-lg-padding-x);
+    font-size: var(--button-lg-font-size);
+  }
+
+  /* ─── Primary ─── */
+  .btn-primary {
+    background: var(--button-primary-bg);
+    color: var(--button-primary-text);
+    border: var(--button-primary-border);
+  }
+
+  .btn-primary:hover:not(:disabled) {
+    background: var(--button-primary-bg-hover);
+  }
+
+  .btn-primary:active:not(:disabled) {
+    background: var(--button-primary-bg-hover);
+    transform: scale(0.97);
+  }
+
+  /* ─── Secondary ─── */
+  .btn-secondary {
+    background: var(--button-secondary-bg);
+    color: var(--button-secondary-text);
+    border: var(--button-secondary-border);
+  }
+
+  .btn-secondary:hover:not(:disabled) {
+    background: var(--button-secondary-bg-hover);
+  }
+
+  .btn-secondary:active:not(:disabled) {
+    background: var(--button-secondary-bg-hover);
+    transform: scale(0.97);
+  }
+
+  /* ─── Ghost ─── */
+  .btn-ghost {
+    background: var(--button-ghost-bg);
+    color: var(--button-ghost-text);
+    border: var(--button-ghost-border);
+  }
+
+  .btn-ghost:hover:not(:disabled) {
+    background: var(--button-ghost-bg-hover);
+  }
+
+  .btn-ghost:active:not(:disabled) {
+    background: var(--button-ghost-bg-hover);
+    transform: scale(0.97);
+  }
+
+  /* ─── Destructive ─── */
+  .btn-destructive {
+    background: var(--button-destructive-bg);
+    color: var(--button-destructive-text);
+    border: var(--button-destructive-border);
+  }
+
+  .btn-destructive:hover:not(:disabled) {
+    background: var(--button-destructive-bg-hover);
+  }
+
+  .btn-destructive:active:not(:disabled) {
+    background: var(--button-destructive-bg-hover);
+    transform: scale(0.97);
+  }
+
+  /* ─── Label ─── */
+  .btn-label {
+    font-family: inherit;
+    font-size: inherit;
+    letter-spacing: inherit;
+  }
+
+  /* ─── Icon ─── */
+  .btn-icon-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+  }
+
+  .btn-icon-wrap :global(svg) {
+    width: 100%;
+    height: 100%;
+  }
+
+  .btn-icon-only {
+    padding: 0;
+  }
+
+  .btn-icon-only.btn-sm {
+    width: var(--button-sm-height);
+  }
+
+  .btn-icon-only.btn-md {
+    width: var(--button-md-height);
+  }
+
+  .btn-icon-only.btn-lg {
+    width: var(--button-lg-height);
+  }
+
+  /* ─── Spinner ─── */
+  .spinner {
+    width: 14px;
+    height: 14px;
+    border: var(--border-width-thick) solid currentColor;
+    border-top-color: transparent;
+    border-radius: var(--radius-circle);
+    animation: spin 0.6s linear infinite;
+    flex-shrink: 0;
+  }
+
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .spinner {
+      animation: none;
+    }
+  }
+</style>