@aiaiai-pt/design-system 0.1.0

package/components/Tabs.svelte

@@ -0,0 +1,46 @@
+<!--
+  @component Tabs
+
+  Container for tabbed interface. Provides context to TabList, Tab, and TabPanel.
+  Consumes --tabs-* tokens from components.css.
+
+  @example
+  <Tabs bind:value={activeTab}>
+    <TabList>
+      <Tab value="overview">OVERVIEW</Tab>
+      <Tab value="settings">SETTINGS</Tab>
+    </TabList>
+    <TabPanel value="overview">Overview content</TabPanel>
+    <TabPanel value="settings">Settings content</TabPanel>
+  </Tabs>
+-->
+<script>
+  import { setContext } from 'svelte';
+
+  let {
+    /** @type {string} */
+    value = $bindable(''),
+    /** @type {string} */
+    class: className = '',
+    /** @type {import('svelte').Snippet | undefined} */
+    children = undefined,
+    ...rest
+  } = $props();
+
+  setContext('tabs', {
+    get value() { return value; },
+    /** @param {string} v */
+    setValue(v) { value = v; }
+  });
+</script>
+
+<div class="tabs {className}" {...rest}>
+  {#if children}{@render children()}{/if}
+</div>
+
+<style>
+  .tabs {
+    display: flex;
+    flex-direction: column;
+  }
+</style>

package/components/Tag.svelte

@@ -0,0 +1,96 @@
+<!--
+  @component Tag
+
+  Categorization label. Bordered, optionally removable.
+  Consumes --tag-* tokens from components.css.
+
+  @example
+  <Tag>SVELTE</Tag>
+
+  @example Removable
+  <Tag removable onremove={() => console.log('removed')}>CSS</Tag>
+-->
+<script>
+  let {
+    /** @type {boolean} */
+    removable = false,
+    /** @type {(() => void) | undefined} */
+    onremove = undefined,
+    /** @type {string} */
+    class: className = '',
+    /** @type {import('svelte').Snippet | undefined} */
+    children = undefined,
+    ...rest
+  } = $props();
+</script>
+
+<span
+  class="tag {className}"
+  class:tag-removable={removable}
+  {...rest}
+>
+  {#if children}
+    {@render children()}
+  {/if}
+  {#if removable}
+    <button
+      class="tag-remove"
+      aria-label="Remove tag"
+      onclick={(e) => {
+        e.stopPropagation();
+        onremove?.();
+      }}
+    >
+      <svg viewBox="0 0 10 10" fill="none" class="tag-remove-icon" aria-hidden="true">
+        <path d="M2 2l6 6M8 2l-6 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+      </svg>
+    </button>
+  {/if}
+</span>
+
+<style>
+  .tag {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-xs);
+    font-family: var(--tag-font);
+    font-size: var(--tag-size);
+    border-radius: var(--tag-radius);
+    padding: var(--tag-padding-y) var(--tag-padding-x);
+    border: var(--tag-border);
+    background: var(--tag-bg);
+    color: var(--tag-text);
+    white-space: nowrap;
+  }
+
+  .tag-removable {
+    padding-right: var(--space-xs);
+  }
+
+  .tag-remove {
+    all: unset;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 14px;
+    height: 14px;
+    border-radius: var(--radius-sm);
+    color: var(--color-text-muted);
+    transition: color var(--duration-instant) var(--easing-default);
+  }
+
+  .tag-remove:hover {
+    color: var(--color-text);
+  }
+
+  .tag-remove:focus-visible {
+    outline: var(--focus-ring-width) solid var(--focus-ring-color);
+    outline-offset: var(--focus-ring-offset);
+  }
+
+  .tag-remove-icon {
+    width: 10px;
+    height: 10px;
+  }
+</style>

package/components/Textarea.svelte

@@ -0,0 +1,143 @@
+<!--
+  @component Textarea
+
+  Multi-line text input with label, help text, and error state.
+  Values displayed in Berkeley Mono (data font).
+  Consumes --input-* and --textarea-* tokens from components.css.
+
+  @example
+  <Textarea label="DESCRIPTION" placeholder="Enter a description..." rows={4} />
+
+  @example With error
+  <Textarea label="SQL QUERY" value="SELCT *" error="Syntax error near SELCT" />
+-->
+<script module>
+  let _textareaUid = 0;
+</script>
+
+<script>
+  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 {number} */
+    rows = 3,
+    /** @type {boolean} */
+    disabled = false,
+    /** @type {boolean} */
+    readonly = false,
+    /** @type {string | undefined} */
+    id = undefined,
+    /** @type {string} */
+    class: className = '',
+    ...rest
+  } = $props();
+
+  const fallbackId = `textarea-${_textareaUid++}`;
+  const textareaId = $derived(id ?? fallbackId);
+  const hintId = $derived(`${textareaId}-hint`);
+  const hasHint = $derived(!!error || !!help);
+</script>
+
+<div class="textarea-group {className}">
+  {#if label}
+    <label class="textarea-label" for={textareaId}>{label}</label>
+  {/if}
+
+  <textarea
+    id={textareaId}
+    class="textarea"
+    class:textarea-error={!!error}
+    class:textarea-readonly={readonly}
+    aria-invalid={error ? true : undefined}
+    aria-describedby={hasHint ? hintId : undefined}
+    {placeholder}
+    {disabled}
+    {readonly}
+    {rows}
+    bind:value
+    {...rest}
+  ></textarea>
+
+  {#if error}
+    <span id={hintId} class="textarea-error-text" role="alert">{error}</span>
+  {:else if help}
+    <span id={hintId} class="textarea-help">{help}</span>
+  {/if}
+</div>
+
+<style>
+  .textarea-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--input-label-gap);
+    width: 100%;
+  }
+
+  .textarea-label {
+    font-family: var(--input-label-font);
+    font-size: var(--input-label-size);
+    letter-spacing: var(--input-label-tracking);
+    color: var(--input-label-color);
+  }
+
+  .textarea {
+    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%;
+    padding: var(--textarea-padding);
+    min-height: var(--textarea-min-height);
+    resize: vertical;
+  }
+
+  .textarea::placeholder {
+    color: var(--input-placeholder);
+  }
+
+  .textarea:focus {
+    outline: none;
+    border: var(--input-border-focus);
+  }
+
+  .textarea:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .textarea-readonly {
+    background: var(--color-surface-secondary);
+    cursor: default;
+  }
+
+  .textarea-error {
+    border-color: var(--input-error-border-color);
+  }
+
+  .textarea-error:focus {
+    border-color: var(--input-error-border-color);
+  }
+
+  .textarea-help {
+    font-family: var(--input-help-font);
+    font-size: var(--input-help-size);
+    color: var(--input-help-color);
+  }
+
+  .textarea-error-text {
+    font-family: var(--input-help-font);
+    font-size: var(--input-help-size);
+    color: var(--input-error-text);
+  }
+</style>

package/components/Toast.svelte

@@ -0,0 +1,114 @@
+<!--
+  @component Toast
+
+  Non-blocking notification with accent stripe.
+  Consumes --toast-* tokens from components.css.
+
+  This is the visual component only — toast positioning/stacking/auto-dismiss
+  is the consumer's responsibility.
+
+  @example
+  <Toast variant="success">
+    <strong>Project created.</strong> Your new project is ready.
+  </Toast>
+
+  @example With action
+  <Toast variant="info" actionLabel="UNDO" onaction={() => undo()}>
+    <strong>Message archived.</strong>
+  </Toast>
+-->
+<script>
+  /**
+   * @typedef {'info' | 'success' | 'warning' | 'error'} Variant
+   */
+
+  let {
+    /** @type {Variant} */
+    variant = 'info',
+    /** @type {string | undefined} */
+    actionLabel = undefined,
+    /** @type {(() => void) | undefined} */
+    onaction = undefined,
+    /** @type {string} */
+    class: className = '',
+    /** @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="toast {className}" role={variant === 'error' ? 'alert' : 'status'} {...rest}>
+  <div class="toast-accent" style:background={accentColors[variant]}></div>
+  <div class="toast-content">
+    <span class="toast-message">
+      {#if children}{@render children()}{/if}
+    </span>
+    {#if actionLabel && onaction}
+      <button class="toast-action" onclick={onaction}>
+        <span class="toast-action-label">{actionLabel}</span>
+      </button>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .toast {
+    display: flex;
+    overflow: hidden;
+    border-radius: var(--toast-radius);
+    border: var(--toast-border);
+    box-shadow: var(--toast-shadow);
+    background: var(--toast-bg);
+    max-width: var(--toast-max-width);
+  }
+
+  .toast-accent {
+    width: var(--accent-stripe-width);
+    flex-shrink: 0;
+  }
+
+  .toast-content {
+    padding: var(--toast-padding);
+    font-family: var(--toast-font);
+    font-size: var(--toast-font-size);
+    display: flex;
+    align-items: center;
+    gap: var(--space-md);
+    flex: 1;
+  }
+
+  .toast-message {
+    flex: 1;
+  }
+
+  .toast-action {
+    all: unset;
+    cursor: pointer;
+    flex-shrink: 0;
+    transition: opacity var(--duration-instant) var(--easing-default);
+  }
+
+  .toast-action:hover {
+    opacity: 0.8;
+  }
+
+  .toast-action:focus-visible {
+    outline: var(--focus-ring-width) solid var(--focus-ring-color);
+    outline-offset: var(--focus-ring-offset);
+  }
+
+  .toast-action-label {
+    font-family: var(--type-label-font);
+    font-size: var(--type-label-size);
+    letter-spacing: var(--type-label-tracking);
+    color: var(--color-accent);
+  }
+</style>

package/components/Toggle.svelte

@@ -0,0 +1,132 @@
+<!--
+  @component Toggle
+
+  On/off switch with label.
+  Consumes --toggle-* tokens from components.css.
+
+  @example
+  <Toggle label="Dark mode" bind:checked />
+
+  @example Disabled
+  <Toggle label="Notifications" checked disabled />
+-->
+<script module>
+  let _toggleUid = 0;
+</script>
+
+<script>
+  let {
+    /** @type {boolean} */
+    checked = $bindable(false),
+    /** @type {boolean} */
+    disabled = false,
+    /** @type {string | undefined} */
+    label = undefined,
+    /** @type {string | undefined} */
+    id = undefined,
+    /** @type {((checked: boolean) => void) | undefined} */
+    onchange = undefined,
+    /** @type {string} */
+    class: className = '',
+    ...rest
+  } = $props();
+
+  const fallbackId = `toggle-${_toggleUid++}`;
+  const toggleId = $derived(id ?? fallbackId);
+
+  function handleClick() {
+    if (!disabled) {
+      checked = !checked;
+      onchange?.(checked);
+    }
+  }
+</script>
+
+<div class="toggle-group {className}">
+  <button
+    id={toggleId}
+    class="toggle"
+    class:toggle-on={checked}
+    class:toggle-disabled={disabled}
+    {disabled}
+    role="switch"
+    aria-checked={checked}
+    aria-labelledby={label ? `${toggleId}-label` : undefined}
+    {...rest}
+    onclick={handleClick}
+  >
+    <span class="toggle-knob"></span>
+  </button>
+  {#if label}
+    <span
+      id="{toggleId}-label"
+      class="toggle-label"
+      class:toggle-label-disabled={disabled}
+      onclick={handleClick}
+      role="none"
+    >{label}</span>
+  {/if}
+</div>
+
+<style>
+  .toggle-group {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+  }
+
+  .toggle {
+    width: var(--toggle-width);
+    height: var(--toggle-height);
+    border-radius: var(--toggle-radius);
+    background: var(--toggle-bg-off);
+    position: relative;
+    cursor: pointer;
+    transition: background var(--duration-fast) var(--easing-default);
+    border: none;
+    padding: 0;
+    flex-shrink: 0;
+  }
+
+  .toggle:focus-visible {
+    outline: var(--focus-ring-width) solid var(--focus-ring-color);
+    outline-offset: var(--focus-ring-offset);
+  }
+
+  .toggle-on {
+    background: var(--toggle-bg-on);
+  }
+
+  .toggle-disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .toggle-knob {
+    position: absolute;
+    top: var(--space-2xs);
+    left: var(--space-2xs);
+    width: var(--toggle-knob-size);
+    height: var(--toggle-knob-size);
+    border-radius: var(--radius-circle);
+    background: var(--toggle-knob-color);
+    transition: transform var(--duration-fast) var(--easing-default);
+  }
+
+  .toggle-on .toggle-knob {
+    transform: translateX(
+      calc(var(--toggle-width) - var(--toggle-knob-size) - calc(2 * var(--space-2xs)))
+    );
+  }
+
+  .toggle-label {
+    font-family: var(--type-body-sm-font);
+    font-size: var(--type-body-sm-size);
+    color: var(--color-text);
+    cursor: pointer;
+  }
+
+  .toggle-label-disabled {
+    color: var(--color-text-muted);
+  }
+</style>

package/components/index.js

@@ -0,0 +1,70 @@
+/*
+ * aiaiai Design System — Component Library
+ *
+ * Svelte 5 components consuming tokens from components.css.
+ * Import tokens (base.css → semantic.css → components.css) before using.
+ *
+ * Usage:
+ *   import { Button, Card, Badge } from '$lib/ui';
+ */
+
+// Atoms
+export { default as Badge } from "./Badge.svelte";
+export { default as Tag } from "./Tag.svelte";
+export { default as Status } from "./Status.svelte";
+export { default as Skeleton } from "./Skeleton.svelte";
+export { default as KeyValue } from "./KeyValue.svelte";
+
+// Form controls
+export { default as Button } from "./Button.svelte";
+export { default as Input } from "./Input.svelte";
+export { default as Textarea } from "./Textarea.svelte";
+export { default as Select } from "./Select.svelte";
+export { default as Toggle } from "./Toggle.svelte";
+export { default as Checkbox } from "./Checkbox.svelte";
+export { default as Label } from "./Label.svelte";
+export { default as FileUpload } from "./FileUpload.svelte";
+export { default as FileUploadItem } from "./FileUploadItem.svelte";
+
+// Layout
+export { default as Separator } from "./Separator.svelte";
+export { default as Progress } from "./Progress.svelte";
+export { default as List } from "./List.svelte";
+export { default as ListItem } from "./ListItem.svelte";
+
+// Containers
+export { default as Card } from "./Card.svelte";
+export { default as Panel } from "./Panel.svelte";
+export { default as Modal } from "./Modal.svelte";
+export { default as Popover } from "./Popover.svelte";
+export { default as Menu } from "./Menu.svelte";
+export { default as MenuItem } from "./MenuItem.svelte";
+export { default as MenuSeparator } from "./MenuSeparator.svelte";
+
+// Form controls — composite
+export { default as Combobox } from "./Combobox.svelte";
+
+// Tabs
+export { default as Tabs } from "./Tabs.svelte";
+export { default as TabList } from "./TabList.svelte";
+export { default as Tab } from "./Tab.svelte";
+export { default as TabPanel } from "./TabPanel.svelte";
+
+// Feedback
+export { default as Alert } from "./Alert.svelte";
+export { default as Toast } from "./Toast.svelte";
+export { default as EmptyState } from "./EmptyState.svelte";
+
+// Navigation
+export { default as Sidebar } from "./Sidebar.svelte";
+export { default as SidebarItem } from "./SidebarItem.svelte";
+export { default as SidebarSection } from "./SidebarSection.svelte";
+export { default as BottomNav } from "./BottomNav.svelte";
+export { default as BottomNavItem } from "./BottomNavItem.svelte";
+
+// Complex
+export { default as Stepper } from "./Stepper.svelte";
+export { default as CodeBlock } from "./CodeBlock.svelte";
+export { default as CodeEditor } from "./CodeEditor.svelte";
+export { default as CollapsibleSection } from "./CollapsibleSection.svelte";
+export { default as OptionGrid } from "./OptionGrid.svelte";

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@aiaiai-pt/design-system",
+  "version": "0.1.0",
+  "description": "Design system tokens and Svelte components for aiaiai products",
+  "license": "MIT",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/aiaiai-pt/aiaiai-design-system.git"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "svelte": "./components/index.js",
+  "exports": {
+    ".": {
+      "svelte": "./components/index.js",
+      "default": "./components/index.js"
+    },
+    "./components": {
+      "svelte": "./components/index.js",
+      "default": "./components/index.js"
+    },
+    "./components/*": {
+      "svelte": "./components/*",
+      "default": "./components/*"
+    },
+    "./tokens/*": "./tokens/*"
+  },
+  "files": [
+    "components",
+    "tokens"
+  ],
+  "peerDependencies": {
+    "svelte": "^5.0.0",
+    "@codemirror/view": "^6.0.0",
+    "@codemirror/state": "^6.0.0",
+    "@codemirror/language": "^6.0.0",
+    "@codemirror/commands": "^6.0.0",
+    "@codemirror/lang-sql": "^6.0.0",
+    "@codemirror/lang-python": "^6.0.0",
+    "@codemirror/lang-json": "^6.0.0",
+    "@lezer/highlight": "^1.0.0"
+  }
+}