@salas-ds/cli 0.1.0 → 0.2.0

package/dist/index.js

@@ -5,7 +5,6 @@ import fs2 from 'fs-extra';
 import path2 from 'path';
 import { fileURLToPath } from 'url';
 import { glob } from 'glob';
-import inquirer from 'inquirer';
 
 // src/index.ts
 
@@ -175,118 +174,286 @@ var THEME_CSS = `/* Salas Design System - Light & Dark theme */
 [data-theme="dark"] .salas-autocomplete-loading { color: var(--salas-text-muted); }
 `;
 
+// src/utils-template.ts
+var UTILS_TS = `/**
+ * Salas Design System - Utility functions
+ * Generated by @salas-ds/cli
+ */
+
+export const cn = (...classes: (string | undefined | null | false)[]): string => {
+  return classes.filter(Boolean).join(' ');
+};
+
+export const isEqual = <T>(a: T, b: T): boolean => {
+  if (Object.is(a, b)) return true;
+  if (typeof a !== 'object' || typeof b !== 'object' || a === null || b === null) {
+    return false;
+  }
+  const keysA = Object.keys(a);
+  const keysB = Object.keys(b);
+  if (keysA.length !== keysB.length) return false;
+  for (const key of keysA) {
+    if (!keysB.includes(key)) return false;
+    if (!isEqual((a as any)[key], (b as any)[key])) return false;
+  }
+  return true;
+};
+
+export const debounce = <T extends (...args: any[]) => any>(
+  func: T,
+  wait: number
+): ((...args: Parameters<T>) => void) => {
+  let timeout: ReturnType<typeof setTimeout> | null = null;
+  return (...args: Parameters<T>) => {
+    if (timeout) clearTimeout(timeout);
+    timeout = setTimeout(() => func(...args), wait);
+  };
+};
+
+export const throttle = <T extends (...args: any[]) => any>(
+  func: T,
+  limit: number
+): ((...args: Parameters<T>) => void) => {
+  let inThrottle: boolean;
+  return (...args: Parameters<T>) => {
+    if (!inThrottle) {
+      func(...args);
+      inThrottle = true;
+      setTimeout(() => (inThrottle = false), limit);
+    }
+  };
+};
+`;
+
 // src/commands/init.ts
-var __filename$1 = fileURLToPath(import.meta.url);
-path2.dirname(__filename$1);
+var CONFIG_FILE = "salas-ds.json";
 async function initCommand(options) {
   console.log(chalk2.blue("\u{1F680} Inicializando Salas Design System...\n"));
   const projectRoot = process.cwd();
   const componentsPath = path2.join(projectRoot, options.path);
   try {
+    const angularJsonPath = path2.join(projectRoot, "angular.json");
+    const isAngular = await fs2.pathExists(angularJsonPath);
+    if (!isAngular) {
+      console.error(chalk2.red("\u274C Projeto Angular n\xE3o detectado (angular.json n\xE3o encontrado)."));
+      console.log(chalk2.gray("Execute este comando na raiz de um projeto Angular."));
+      process.exit(1);
+    }
     await fs2.ensureDir(componentsPath);
+    const config = {
+      $schema: "https://salas-ds.dev/schema.json",
+      framework: options.framework,
+      componentsDir: options.path,
+      utils: `${options.path}/utils.ts`,
+      styles: `${options.path}/styles.css`
+    };
+    await fs2.writeJSON(path2.join(projectRoot, CONFIG_FILE), config, { spaces: 2 });
     const cssPath = path2.join(componentsPath, "styles.css");
     await fs2.writeFile(cssPath, THEME_CSS);
-    console.log(chalk2.green("\u2705 Salas Design System inicializado com sucesso!"));
-    console.log(chalk2.gray(`   Componentes ser\xE3o adicionados em: ${options.path}`));
-    console.log(chalk2.gray(`   CSS variables criado em: ${options.path}/styles.css
+    const utilsPath = path2.join(componentsPath, "utils.ts");
+    await fs2.writeFile(utilsPath, UTILS_TS);
+    console.log(chalk2.green("\u2705 Salas Design System inicializado com sucesso!\n"));
+    console.log(chalk2.gray("Arquivos criados:"));
+    console.log(chalk2.gray(`   ${CONFIG_FILE}`));
+    console.log(chalk2.gray(`   ${options.path}/styles.css`));
+    console.log(chalk2.gray(`   ${options.path}/utils.ts
 `));
     console.log(chalk2.blue("\u{1F4A1} Pr\xF3ximos passos:"));
-    console.log(chalk2.gray(`   npx @salas-ds/cli add button`));
-    console.log(chalk2.gray(`   npx @salas-ds/cli add input`));
+    console.log(chalk2.gray(`   1. Importe o CSS no seu styles.css ou angular.json:`));
+    console.log(chalk2.white(`      @import './${options.path}/styles.css';`));
+    console.log(chalk2.gray(`
+   2. Adicione componentes:`));
+    console.log(chalk2.white(`      npx @salas-ds/cli add button`));
+    console.log(chalk2.white(`      npx @salas-ds/cli add input`));
+    console.log(chalk2.white(`      npx @salas-ds/cli add --all`));
+    console.log(chalk2.gray(`
+   3. Componentes dispon\xEDveis:`));
+    console.log(chalk2.gray(`      accordion, autocomplete, avatar, badge, button, card,`));
+    console.log(chalk2.gray(`      checkbox, datepicker, dialog, input, scroll-area, select,`));
+    console.log(chalk2.gray(`      separator, sheet, sidebar, skeleton, spinner, table,`));
+    console.log(chalk2.gray(`      tabs, textarea, toast, tooltip`));
   } catch (error) {
     console.error(chalk2.red("\u274C Erro ao inicializar:"), error);
     process.exit(1);
   }
 }
-var __filename2 = fileURLToPath(import.meta.url);
-var __dirname2 = path2.dirname(__filename2);
-var COMPONENTS = ["button", "input", "select", "autocomplete", "datepicker"];
-var DEFAULT_PATH = "src/components";
+var __filename$1 = fileURLToPath(import.meta.url);
+var __dirname$1 = path2.dirname(__filename$1);
+var COMPONENTS = [
+  "accordion",
+  "autocomplete",
+  "avatar",
+  "badge",
+  "button",
+  "card",
+  "checkbox",
+  "datepicker",
+  "dialog",
+  "input",
+  "scroll-area",
+  "select",
+  "separator",
+  "sheet",
+  "sidebar",
+  "skeleton",
+  "spinner",
+  "table",
+  "tabs",
+  "textarea",
+  "toast",
+  "tooltip"
+];
+var LUCIDE_COMPONENTS = ["autocomplete", "datepicker", "input", "select", "textarea"];
+var CONFIG_FILE2 = "salas-ds.json";
+function toPascalCase(str) {
+  return str.split("-").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join("");
+}
+async function readConfig() {
+  const projectRoot = process.cwd();
+  const configPath = path2.join(projectRoot, CONFIG_FILE2);
+  if (!await fs2.pathExists(configPath)) {
+    return null;
+  }
+  return fs2.readJSON(configPath);
+}
+async function addSingleComponent(componentName, componentsDir, options) {
+  const projectRoot = process.cwd();
+  const componentPath = path2.join(projectRoot, componentsDir, componentName);
+  if (await fs2.pathExists(componentPath)) {
+    if (!options.overwrite) {
+      console.log(chalk2.yellow(`   \u26A0 ${componentName} j\xE1 existe. Use --overwrite para substituir.`));
+      return false;
+    }
+    await fs2.remove(componentPath);
+  }
+  await fs2.ensureDir(componentPath);
+  const templatePath = path2.join(__dirname$1, "..", "templates", "angular", componentName);
+  if (!await fs2.pathExists(templatePath)) {
+    console.error(chalk2.red(`   \u274C Template n\xE3o encontrado para: ${componentName}`));
+    return false;
+  }
+  const templateFiles = await glob("**/*", {
+    cwd: templatePath,
+    dot: false,
+    nodir: true
+  });
+  for (const file of templateFiles) {
+    const srcPath = path2.join(templatePath, file);
+    const destPath = path2.join(componentPath, file);
+    await fs2.ensureDir(path2.dirname(destPath));
+    await fs2.copyFile(srcPath, destPath);
+  }
+  return true;
+}
 async function addCommand(componentName, options) {
-  if (!COMPONENTS.includes(componentName)) {
-    console.error(
-      chalk2.red(`\u274C Componente "${componentName}" n\xE3o encontrado.`)
-    );
-    console.log(chalk2.gray(`Componentes dispon\xEDveis: ${COMPONENTS.join(", ")}`));
+  const config = await readConfig();
+  if (!config) {
+    console.error(chalk2.red("\u274C Projeto n\xE3o inicializado."));
+    console.log(chalk2.gray("Execute primeiro: npx @salas-ds/cli init"));
     process.exit(1);
   }
-  console.log(chalk2.blue(`\u{1F4E6} Adicionando componente: ${componentName}
+  const componentsDir = options.path ?? config.componentsDir;
+  const componentsToAdd = [];
+  if (options.all) {
+    componentsToAdd.push(...COMPONENTS);
+    console.log(chalk2.blue(`\u{1F4E6} Adicionando todos os ${COMPONENTS.length} componentes...
 `));
-  const defaultPath = options.path ?? DEFAULT_PATH;
-  const { path: chosenPath } = await inquirer.prompt([
-    {
-      type: "input",
-      name: "path",
-      message: `Pasta onde o componente ser\xE1 criado (ser\xE1 criado: ${defaultPath}/${componentName})`,
-      default: defaultPath,
-      transformer: (input) => input.trim() || defaultPath
-    }
-  ]);
-  const basePath = (chosenPath || defaultPath).trim();
-  const projectRoot = process.cwd();
-  const componentsPath = path2.join(projectRoot, basePath);
-  const componentPath = path2.join(componentsPath, componentName);
-  try {
-    const angularJsonPath = path2.join(projectRoot, "angular.json");
-    const isAngular = await fs2.pathExists(angularJsonPath);
-    if (!isAngular) {
-      console.error(chalk2.red("\u274C Projeto Angular n\xE3o detectado."));
-      console.log(chalk2.gray("Execute este comando em um projeto Angular."));
-      process.exit(1);
-    }
-    await fs2.ensureDir(componentPath);
-    const templatePath = path2.join(
-      __dirname2,
-      "..",
-      "..",
-      "templates",
-      "angular",
-      componentName
-    );
-    if (!await fs2.pathExists(templatePath)) {
-      console.error(chalk2.red(`\u274C Template n\xE3o encontrado para: ${componentName}`));
+  } else if (componentName) {
+    if (!COMPONENTS.includes(componentName)) {
+      console.error(chalk2.red(`\u274C Componente "${componentName}" n\xE3o encontrado.`));
+      console.log(chalk2.gray(`
+Componentes dispon\xEDveis:`));
+      console.log(chalk2.gray(`  ${COMPONENTS.join(", ")}`));
       process.exit(1);
     }
-    const templateFiles = await glob("**/*", {
-      cwd: templatePath,
-      dot: false,
-      ignore: ["node_modules/**"]
-    });
-    for (const file of templateFiles) {
-      const srcPath = path2.join(templatePath, file);
-      const destPath = path2.join(componentPath, file);
-      await fs2.ensureDir(path2.dirname(destPath));
-      let content = await fs2.readFile(srcPath, "utf-8");
-      content = content.replace(/{{COMPONENT_NAME}}/g, componentName);
-      content = content.replace(/{{COMPONENT_CLASS}}/g, toPascalCase(componentName));
-      await fs2.writeFile(destPath, content);
-    }
-    const relativePath = path2.relative(projectRoot, componentPath);
-    console.log(chalk2.green(`\u2705 Componente ${componentName} adicionado com sucesso!`));
-    console.log(chalk2.gray(`   Localiza\xE7\xE3o: ${relativePath}
+    componentsToAdd.push(componentName);
+    console.log(chalk2.blue(`\u{1F4E6} Adicionando componente: ${componentName}
 `));
-    console.log(chalk2.blue("\u{1F4A1} Pr\xF3ximos passos:"));
-    console.log(chalk2.gray(`   1. Importe o componente (ex.: no seu m\xF3dulo ou standalone):`));
-    const importPath = `./${path2.join(basePath, componentName, componentName).replace(/\\/g, "/")}.module`;
-    console.log(
-      chalk2.gray(
-        `      import { Salas${toPascalCase(componentName)}Module } from '${importPath}';`
-      )
-    );
-    console.log(chalk2.gray(`   2. Use no template:`));
-    console.log(chalk2.gray(`      <salas-${componentName}></salas-${componentName}>`));
-  } catch (error) {
-    console.error(chalk2.red("\u274C Erro ao adicionar componente:"), error);
+  } else {
+    console.error(chalk2.red("\u274C Especifique um componente ou use --all."));
+    console.log(chalk2.gray(`
+Exemplos:`));
+    console.log(chalk2.gray(`  npx @salas-ds/cli add button`));
+    console.log(chalk2.gray(`  npx @salas-ds/cli add --all`));
     process.exit(1);
   }
-}
-function toPascalCase(str) {
-  return str.split("-").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join("");
+  const added = [];
+  const needsLucide = /* @__PURE__ */ new Set();
+  for (const name of componentsToAdd) {
+    const success = await addSingleComponent(name, componentsDir, options);
+    if (success) {
+      added.push(name);
+      if (LUCIDE_COMPONENTS.includes(name)) {
+        needsLucide.add(name);
+      }
+      console.log(chalk2.green(`   \u2713 ${name}`));
+    }
+  }
+  if (added.length === 0) {
+    console.log(chalk2.yellow("\nNenhum componente adicionado."));
+    return;
+  }
+  process.cwd();
+  console.log(chalk2.green(`
+\u2705 ${added.length} componente(s) adicionado(s) com sucesso!`));
+  console.log(chalk2.gray(`   Localiza\xE7\xE3o: ${componentsDir}/
+`));
+  if (needsLucide.size > 0) {
+    console.log(chalk2.yellow("\u26A0  Os seguintes componentes precisam do lucide-angular:"));
+    console.log(chalk2.gray(`   ${[...needsLucide].join(", ")}`));
+    console.log(chalk2.gray(`   Instale com: npm install lucide-angular
+`));
+  }
+  console.log(chalk2.blue("\u{1F4A1} Como usar:"));
+  const example = added[0];
+  const exampleClass = `Salas${toPascalCase(example)}Component`;
+  const relPath = `./${path2.join(componentsDir, example, example).replace(/\\/g, "/")}`;
+  console.log(chalk2.gray(`   // Standalone component:`));
+  console.log(chalk2.white(`   import { ${exampleClass} } from '${relPath}.component';`));
+  console.log(chalk2.gray(`
+   // Ou via module:`));
+  console.log(chalk2.white(`   import { Salas${toPascalCase(example)}Module } from '${relPath}.module';`));
 }
 
 // src/index.ts
 var program = new Command();
-program.name("salas-ds").description("CLI para adicionar componentes do Salas Design System").version("0.1.0");
-program.command("init").description("Inicializa o Salas Design System no projeto").option("-f, --framework <framework>", "Framework (angular)", "angular").option("-p, --path <path>", "Caminho para componentes", "src/app/ui").action(initCommand);
-program.command("add").description("Adiciona um componente ao projeto").argument("<component>", "Nome do componente").option("-p, --path <path>", "Pasta onde o componente ser\xE1 criado (ex: src/components)", "src/components").action(addCommand);
+program.name("salas-ds").description("CLI para adicionar componentes do Salas Design System ao seu projeto Angular (estilo shadcn)").version("0.1.0");
+program.command("init").description("Inicializa o Salas Design System no projeto").option("-f, --framework <framework>", "Framework (angular)", "angular").option("-p, --path <path>", "Caminho para componentes", "src/components/ui").action(initCommand);
+program.command("add [component]").description("Adiciona um componente ao projeto").option("-p, --path <path>", "Pasta onde os componentes ser\xE3o criados").option("-a, --all", "Adiciona todos os componentes").option("--overwrite", "Sobrescreve componentes existentes").action(addCommand);
+program.command("list").description("Lista todos os componentes dispon\xEDveis").action(() => {
+  const components = [
+    "accordion",
+    "autocomplete",
+    "avatar",
+    "badge",
+    "button",
+    "card",
+    "checkbox",
+    "datepicker",
+    "dialog",
+    "input",
+    "scroll-area",
+    "select",
+    "separator",
+    "sheet",
+    "sidebar",
+    "skeleton",
+    "spinner",
+    "table",
+    "tabs",
+    "textarea",
+    "toast",
+    "tooltip"
+  ];
+  console.log(chalk2.blue("\n\u{1F4E6} Componentes dispon\xEDveis:\n"));
+  for (const c of components) {
+    console.log(chalk2.gray(`   \u2022 ${c}`));
+  }
+  console.log(chalk2.gray(`
+Total: ${components.length} componentes`));
+  console.log(chalk2.gray(`
+Uso: npx @salas-ds/cli add <componente>`));
+  console.log(chalk2.gray(`     npx @salas-ds/cli add --all
+`));
+});
 program.parse();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@salas-ds/cli",
-  "version": "0.1.0",
-  "description": "CLI para adicionar componentes do Salas Design System ao projeto",
+  "version": "0.2.0",
+  "description": "CLI para adicionar componentes do Salas Design System ao projeto (estilo shadcn)",
   "type": "module",
   "bin": {
     "salas-ds": "./dist/index.js"
@@ -16,12 +16,10 @@
     "chalk": "^5.3.0",
     "fs-extra": "^11.2.0",
     "glob": "^10.3.10",
-    "inquirer": "^9.2.12",
     "prettier": "^3.2.0"
   },
   "devDependencies": {
     "@types/fs-extra": "^11.0.4",
-    "@types/inquirer": "^9.0.7",
     "@types/node": "^20.11.0",
     "tsup": "^8.0.0",
     "typescript": "~5.5.0"
@@ -35,7 +33,8 @@
   "author": "",
   "license": "MIT",
   "scripts": {
-    "build": "tsup",
+    "generate-templates": "node scripts/generate-templates.mjs",
+    "build": "node scripts/generate-templates.mjs && tsup",
     "dev": "tsup --watch",
     "clean": "rm -rf dist"
   }

package/templates/angular/accordion/accordion-content.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'salas-accordion-content',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+  styles: [`:host { display: contents; }`],
+})
+export class SalasAccordionContentComponent {}

package/templates/angular/accordion/accordion-item.component.ts

@@ -0,0 +1,138 @@
+import { Component, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'salas-accordion-item',
+  standalone: true,
+  imports: [],
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <div
+      class="salas-accordion-item"
+      [class.salas-accordion-item--disabled]="disabled"
+    >
+      <button
+        type="button"
+        class="salas-accordion-trigger"
+        [class.salas-accordion-trigger--open]="open"
+        [disabled]="disabled"
+        (click)="onTriggerClick()"
+        [attr.aria-expanded]="open"
+      >
+        <ng-content select="salas-accordion-trigger"></ng-content>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="salas-accordion-trigger-icon"
+          [class.salas-accordion-trigger-icon--open]="open"
+        >
+          <path d="m6 9 6 6 6-6"/>
+        </svg>
+      </button>
+      <div
+        class="salas-accordion-content"
+        [class.salas-accordion-content--open]="open"
+        [attr.aria-hidden]="!open"
+      >
+        <div class="salas-accordion-content-inner">
+          <ng-content select="salas-accordion-content"></ng-content>
+        </div>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .salas-accordion-item {
+      border-bottom: 1px solid var(--salas-gray-200);
+    }
+
+    .salas-accordion-item:last-child {
+      border-bottom: none;
+    }
+
+    .salas-accordion-item--disabled {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+
+    :host-context([data-theme="dark"]) .salas-accordion-item {
+      border-bottom-color: var(--salas-gray-800);
+    }
+
+    .salas-accordion-trigger {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+      padding: 1rem 0;
+      font-size: 0.875rem;
+      font-weight: 500;
+      color: var(--salas-text);
+      background: none;
+      border: none;
+      cursor: pointer;
+      transition: color 0.2s;
+      text-align: left;
+      font-family: inherit;
+    }
+
+    .salas-accordion-trigger:hover:not(:disabled) {
+      text-decoration: underline;
+    }
+
+    .salas-accordion-trigger:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+
+    .salas-accordion-trigger-icon {
+      flex-shrink: 0;
+      width: 1rem;
+      height: 1rem;
+      transition: transform 0.2s ease;
+      color: var(--salas-text-muted);
+    }
+
+    .salas-accordion-trigger-icon--open {
+      transform: rotate(180deg);
+    }
+
+    .salas-accordion-content {
+      overflow: hidden;
+      max-height: 0;
+      opacity: 0;
+      transition: max-height 0.3s ease, opacity 0.2s ease;
+    }
+
+    .salas-accordion-content--open {
+      max-height: 500px;
+      opacity: 1;
+    }
+
+    .salas-accordion-content-inner {
+      padding-bottom: 1rem;
+      color: var(--salas-text-muted);
+      font-size: 0.875rem;
+      line-height: 1.5;
+    }
+  `],
+})
+export class SalasAccordionItemComponent {
+  @Input() value!: string;
+  @Input() disabled = false;
+
+  open = false;
+
+  @Output() toggled = new EventEmitter<string>();
+
+  onTriggerClick(): void {
+    if (!this.disabled) {
+      this.toggled.emit(this.value);
+    }
+  }
+}

package/templates/angular/accordion/accordion-trigger.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'salas-accordion-trigger',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+  styles: [`:host { display: contents; }`],
+})
+export class SalasAccordionTriggerComponent {}

package/templates/angular/accordion/accordion.component.ts

@@ -0,0 +1,120 @@
+import {
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+  ContentChildren,
+  QueryList,
+  AfterContentInit,
+  OnDestroy,
+  ViewEncapsulation,
+} from '@angular/core';
+import { SalasAccordionItemComponent } from './accordion-item.component';
+
+export type AccordionType = 'single' | 'multiple';
+
+export interface AccordionProps {
+  type?: AccordionType;
+  collapsible?: boolean;
+  defaultValue?: string | string[];
+  value?: string | string[];
+  disabled?: boolean;
+}
+
+export interface AccordionItemProps {
+  value: string;
+  disabled?: boolean;
+}
+
+
+@Component({
+  selector: 'salas-accordion',
+  standalone: true,
+  imports: [],
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <div class="salas-accordion">
+      <ng-content></ng-content>
+    </div>
+  `,
+  styles: [`
+    .salas-accordion {
+      display: flex;
+      flex-direction: column;
+    }
+  `],
+})
+export class SalasAccordionComponent implements AfterContentInit, OnDestroy {
+  @Input() type: AccordionType = 'single';
+  @Input() collapsible = true;
+  @Input() defaultValue?: string | string[];
+  @Input() disabled = false;
+
+  @Output() valueChange = new EventEmitter<string | string[] | undefined>();
+
+  @ContentChildren(SalasAccordionItemComponent) items!: QueryList<SalasAccordionItemComponent>;
+
+  private unsubscribes: Array<() => void> = [];
+
+  ngAfterContentInit(): void {
+    this.initItems();
+
+    this.items.changes.subscribe(() => {
+      this.clearSubscriptions();
+      this.initItems();
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.clearSubscriptions();
+  }
+
+  private initItems(): void {
+    if (this.defaultValue) {
+      const defaults = Array.isArray(this.defaultValue)
+        ? this.defaultValue
+        : [this.defaultValue];
+      this.items.forEach((item) => {
+        item.open = defaults.includes(item.value);
+      });
+    }
+
+    this.items.forEach((item) => {
+      const sub = item.toggled.subscribe((value: string) => {
+        this.handleToggle(item);
+      });
+      this.unsubscribes.push(() => sub.unsubscribe());
+    });
+  }
+
+  private handleToggle(toggledItem: SalasAccordionItemComponent): void {
+    if (this.type === 'single') {
+      const wasOpen = toggledItem.open;
+      this.items.forEach((item) => {
+        item.open = false;
+      });
+      toggledItem.open = this.collapsible ? !wasOpen : true;
+    } else {
+      toggledItem.open = !toggledItem.open;
+    }
+
+    this.emitValue();
+  }
+
+  private emitValue(): void {
+    const openItems = this.items
+      .filter((item) => item.open)
+      .map((item) => item.value);
+
+    if (this.type === 'single') {
+      this.valueChange.emit(openItems[0] ?? undefined);
+    } else {
+      this.valueChange.emit(openItems.length > 0 ? openItems : undefined);
+    }
+  }
+
+  private clearSubscriptions(): void {
+    this.unsubscribes.forEach((unsub) => unsub());
+    this.unsubscribes = [];
+  }
+}