@devstroupe/devkit-cli 1.0.0

package/dist/templates/ui/components/select.template.js

@@ -0,0 +1,176 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.devkitSelectTemplate = devkitSelectTemplate;
+function devkitSelectTemplate() {
+    return {
+        ts: `import { Component, Input, Output, EventEmitter, OnDestroy, forwardRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
+import { HlmSelectImports } from '@spartan-ng/helm/select';
+import { HlmInput } from '@spartan-ng/helm/input';
+import { HlmButton } from '@spartan-ng/helm/button';
+
+export interface DevkitSelectOption {
+  label: string;
+  value: any;
+}
+
+@Component({
+  selector: 'devkit-select',
+  standalone: true,
+  imports: [CommonModule, FormsModule, HlmSelectImports, HlmInput, HlmButton],
+  templateUrl: './select.component.html',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => DevkitSelectComponent),
+      multi: true
+    }
+  ]
+})
+export class DevkitSelectComponent implements ControlValueAccessor, OnDestroy {
+  @Input() label = '';
+  @Input() placeholder = 'Selecione...';
+  @Input() options: DevkitSelectOption[] = [];
+  @Input() required = false;
+  @Input() disabled = false;
+  @Input() multiple = false;
+  @Input() searchable = false;
+  @Input() loading = false;
+  @Input() hasMore = false;
+
+  @Output() searchChange = new EventEmitter<string>();
+  @Output() loadMore = new EventEmitter<void>();
+
+  value: any = null;
+  searchTerm = '';
+  private searchTimer?: ReturnType<typeof setTimeout>;
+
+  onChange: any = () => {};
+  onTouched: any = () => {};
+  itemToString = (value: any): string => this.getSelectedLabel(value);
+
+  writeValue(value: any): void {
+    this.value = value;
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+
+  onValueChange(val: any): void {
+    this.value = val;
+    this.onChange(val);
+    this.onTouched();
+  }
+
+  onSearchInput(event: Event): void {
+    this.searchTerm = (event.target as HTMLInputElement).value;
+    if (this.searchTimer) clearTimeout(this.searchTimer);
+    this.searchTimer = setTimeout(() => this.searchChange.emit(this.searchTerm), 300);
+  }
+
+  ngOnDestroy(): void {
+    if (this.searchTimer) clearTimeout(this.searchTimer);
+  }
+
+  getSelectedLabel(value = this.value): string {
+    if (this.multiple && Array.isArray(value)) {
+      const selectedValues = value;
+      const labels = this.options
+        .filter(opt => selectedValues.includes(opt.value))
+        .map(opt => opt.label);
+      return labels.length > 0 ? labels.join(', ') : this.placeholder;
+    }
+    const selected = this.options.find(opt => opt.value === value);
+    return selected ? selected.label : this.placeholder;
+  }
+}
+`,
+        html: `<div class="flex w-full flex-col space-y-1.5">
+  <label *ngIf="label" class="text-xs font-semibold text-muted-foreground">
+    {{ label }}<span *ngIf="required" class="text-destructive ml-0.5">*</span>
+  </label>
+
+  <hlm-select
+    *ngIf="!multiple"
+    class="w-full"
+    [value]="value"
+    [disabled]="disabled"
+    [itemToString]="itemToString"
+    (valueChange)="onValueChange($event)"
+  >
+    <hlm-select-trigger class="w-full">
+      <hlm-select-value [placeholder]="placeholder" />
+    </hlm-select-trigger>
+    <hlm-select-content *hlmSelectPortal>
+      <ng-container *ngTemplateOutlet="lookupSearch"></ng-container>
+      <hlm-select-group>
+        <hlm-select-item *ngIf="placeholder" [value]="null">{{ placeholder }}</hlm-select-item>
+        <hlm-select-item *ngFor="let opt of options" [value]="opt.value">{{ opt.label }}</hlm-select-item>
+      </hlm-select-group>
+      <ng-container *ngTemplateOutlet="lookupFooter"></ng-container>
+    </hlm-select-content>
+  </hlm-select>
+
+  <hlm-select-multiple
+    *ngIf="multiple"
+    class="w-full"
+    [value]="value || []"
+    [disabled]="disabled"
+    [itemToString]="itemToString"
+    (valueChange)="onValueChange($event)"
+  >
+    <hlm-select-trigger class="w-full">
+      <span class="truncate text-left">{{ getSelectedLabel() }}</span>
+    </hlm-select-trigger>
+    <hlm-select-content *hlmSelectPortal>
+      <ng-container *ngTemplateOutlet="lookupSearch"></ng-container>
+      <hlm-select-group>
+        <hlm-select-item *ngFor="let opt of options" [value]="opt.value">{{ opt.label }}</hlm-select-item>
+      </hlm-select-group>
+      <ng-container *ngTemplateOutlet="lookupFooter"></ng-container>
+    </hlm-select-content>
+  </hlm-select-multiple>
+
+  <ng-template #lookupSearch>
+    <div *ngIf="searchable" class="border-b border-border p-2">
+      <input
+        hlmInput
+        type="search"
+        class="h-8 w-full"
+        placeholder="Buscar..."
+        [value]="searchTerm"
+        (input)="onSearchInput($event)"
+        (keydown)="$event.stopPropagation()"
+        (click)="$event.stopPropagation()"
+      />
+    </div>
+  </ng-template>
+
+  <ng-template #lookupFooter>
+    <div *ngIf="loading" class="border-t border-border px-3 py-2 text-center text-xs text-muted-foreground">Carregando...</div>
+    <button
+      *ngIf="hasMore && !loading"
+      type="button"
+      hlmBtn
+      variant="ghost"
+      class="w-full border-t border-border"
+      (click)="$event.stopPropagation(); loadMore.emit()"
+    >
+      Carregar mais
+    </button>
+  </ng-template>
+</div>
+`
+    };
+}
+// 5. Template do devkit-table

package/dist/templates/ui/components/simple-list.template.d.ts

@@ -0,0 +1,5 @@
+export declare function devkitSimpleListTemplate(): {
+    ts: string;
+    html: string;
+    css: string;
+};

package/dist/templates/ui/components/simple-list.template.js

@@ -0,0 +1,89 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.devkitSimpleListTemplate = devkitSimpleListTemplate;
+function devkitSimpleListTemplate() {
+    return {
+        ts: `import { Component, Input, Output, EventEmitter, TemplateRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { HlmCardImports } from '@spartan-ng/helm/card';
+
+export interface ITableColumn {
+  key: string;
+  label: string;
+  sortable?: boolean;
+}
+
+@Component({
+  selector: 'devkit-simple-list',
+  standalone: true,
+  imports: [CommonModule, HlmCardImports],
+  templateUrl: './simple-list.component.html',
+  styleUrls: ['./simple-list.component.css']
+})
+export class DevkitSimpleListComponent {
+  @Input() columns: ITableColumn[] = [];
+  @Input() items: any[] = [];
+  @Input() customTemplates?: { [columnKey: string]: TemplateRef<any> };
+
+  @Output() rowClick = new EventEmitter<any>();
+
+  getCellValue(item: any, key: string): any {
+    if (!key) return '';
+    if (key.includes('.')) {
+      const value = key.split('.').reduce((acc, part) => {
+        if (Array.isArray(acc)) return acc.map(entry => entry?.[part]).filter(Boolean);
+        return acc && acc[part];
+      }, item);
+      return Array.isArray(value) ? value.join(', ') : value || '';
+    }
+    return item[key] !== undefined ? item[key] : '';
+  }
+
+  getTitleColKey(): string {
+    if (this.columns.some(c => c.key === 'name')) return 'name';
+    if (this.columns.some(c => c.key === 'title')) return 'title';
+    if (this.columns.some(c => c.key === 'label')) return 'label';
+    const nonIdCol = this.columns.find(c => c.key !== 'id' && c.key !== 'actions');
+    return nonIdCol ? nonIdCol.key : '';
+  }
+
+  getTitle(item: any): string {
+    const key = this.getTitleColKey();
+    return key ? this.getCellValue(item, key) : '';
+  }
+
+  isTitleCol(key: string): boolean {
+    return key === this.getTitleColKey();
+  }
+}
+`,
+        html: `<div hlmCard class="overflow-hidden py-0 gap-0">
+  <div *ngFor="let item of items; let index = index" (click)="rowClick.emit(item)" class="flex items-center justify-between border-b border-border p-4 transition-colors last:border-b-0 hover:bg-muted/50 cursor-pointer">
+    <div class="flex items-center space-x-4">
+      <span class="text-sm font-semibold text-muted-foreground">#{{ item.id }}</span>
+      <div class="flex flex-col">
+        <span class="text-base font-medium text-card-foreground">{{ getTitle(item) }}</span>
+        <div class="flex flex-wrap gap-x-4 gap-y-1 mt-1 text-xs text-muted-foreground">
+          <div *ngFor="let col of columns" [class.hidden]="col.key === 'id' || col.key === 'actions' || isTitleCol(col.key)" class="flex space-x-1">
+            <span class="font-medium">{{ col.label }}:</span>
+            <span>{{ getCellValue(item, col.key) }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div *ngIf="customTemplates && customTemplates['actions']" class="flex space-x-2">
+      <ng-container *ngTemplateOutlet="customTemplates['actions']; context: { $implicit: item, index: index }"></ng-container>
+    </div>
+  </div>
+  <div *ngIf="items.length === 0" class="text-center py-10 text-sm text-muted-foreground">
+    Nenhum registro encontrado.
+  </div>
+</div>
+`,
+        css: `:host {
+  display: block;
+}
+`
+    };
+}
+// 9. Template do devkit-dialog

package/dist/templates/ui/components/table.template.d.ts

@@ -0,0 +1,5 @@
+export declare function devkitTableTemplate(): {
+    ts: string;
+    html: string;
+    css: string;
+};

package/dist/templates/ui/components/table.template.js

@@ -0,0 +1,112 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.devkitTableTemplate = devkitTableTemplate;
+function devkitTableTemplate() {
+    return {
+        ts: `import { Component, Input, Output, EventEmitter, TemplateRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { HlmTableImports } from '@spartan-ng/helm/table';
+import { HlmCardImports } from '@spartan-ng/helm/card';
+import { NgIconComponent } from '@ng-icons/core';
+
+export interface ITableColumn {
+  key: string;
+  label: string;
+  sortable?: boolean;
+}
+
+@Component({
+  selector: 'devkit-table',
+  standalone: true,
+  imports: [CommonModule, HlmTableImports, HlmCardImports, NgIconComponent],
+  templateUrl: './table.component.html',
+  styleUrls: ['./table.component.css']
+})
+export class DevkitTableComponent {
+  @Input() columns: ITableColumn[] = [];
+  @Input() items: any[] = [];
+  @Input() currentSort = '';
+  @Input() currentDirection: 'asc' | 'desc' | 'ASC' | 'DESC' = 'ASC';
+  @Input() striped = false;
+  @Input() customTemplates?: { [columnKey: string]: TemplateRef<any> };
+
+  @Output() sortChange = new EventEmitter<{ sort: string; direction: 'ASC' | 'DESC' }>();
+  @Output() rowClick = new EventEmitter<any>();
+
+  getCellValue(item: any, key: string): any {
+    if (!key) return '';
+    if (key.includes('.')) {
+      const value = key.split('.').reduce((acc, part) => {
+        if (Array.isArray(acc)) return acc.map(entry => entry?.[part]).filter(Boolean);
+        return acc && acc[part];
+      }, item);
+      return Array.isArray(value) ? value.join(', ') : value || '';
+    }
+    return item[key] !== undefined ? item[key] : '';
+  }
+
+  sort(col: ITableColumn): void {
+    if (!col.sortable) return;
+    const direction = this.currentSort === col.key && (this.currentDirection === 'ASC' || this.currentDirection === 'asc') ? 'DESC' : 'ASC';
+    this.sortChange.emit({ sort: col.key, direction });
+  }
+}
+`,
+        html: `<div hlmCard class="w-full overflow-hidden py-0 gap-0">
+  <div hlmTableContainer class="w-full overflow-x-auto">
+    <table hlmTable class="w-full">
+      <thead hlmTHead>
+        <tr hlmTr class="bg-muted/40">
+          <th
+            hlmTh
+            *ngFor="let col of columns"
+            (click)="sort(col)"
+            [class.cursor-pointer]="col.sortable"
+            class="h-12 px-4 text-left align-middle font-semibold text-muted-foreground text-xs uppercase tracking-wider select-none transition-colors"
+          >
+            <div class="flex items-center space-x-1">
+              <span>{{ col.label }}</span>
+              <ng-icon
+                *ngIf="col.sortable && currentSort === col.key"
+                [name]="(currentDirection === 'desc' || currentDirection === 'DESC') ? 'lucideChevronDown' : 'lucideChevronUp'"
+                class="size-3 text-muted-foreground"
+              ></ng-icon>
+            </div>
+          </th>
+        </tr>
+      </thead>
+      <tbody hlmTBody>
+        <tr 
+          hlmTr
+          *ngFor="let item of items; let index = index" 
+          class="transition-colors hover:bg-muted/50 cursor-pointer"
+          [class.bg-muted/30]="striped && index % 2 !== 0"
+          (click)="rowClick.emit(item)"
+        >
+          <td hlmTd *ngFor="let col of columns" class="p-4 align-middle text-sm text-card-foreground">
+            <ng-container *ngIf="customTemplates && customTemplates[col.key]; else defaultCell">
+              <ng-container *ngTemplateOutlet="customTemplates[col.key]; context: { $implicit: item, index: index }"></ng-container>
+            </ng-container>
+            <ng-template #defaultCell>
+              {{ getCellValue(item, col.key) }}
+            </ng-template>
+          </td>
+        </tr>
+        <tr hlmTr *ngIf="items.length === 0">
+          <td hlmTd [attr.colspan]="columns.length" class="text-center py-10 text-sm text-muted-foreground">
+            Nenhum registro encontrado.
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+`,
+        css: `:host {
+  display: block;
+  width: 100%;
+}
+`
+    };
+}
+// 6. Template do devkit-filter

package/dist/templates/ui/index.d.ts

@@ -0,0 +1,9 @@
+export * from './theme-css.template';
+export * from './readme.template';
+export * from './components';
+export * from './layout';
+export * from './spartan';
+export * from './playground.template';
+export * from './shared/theme-service.template';
+export * from './shared/profile-service.template';
+export * from './shared/profile-component.template';

package/dist/templates/ui/index.js

@@ -0,0 +1,25 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./theme-css.template"), exports);
+__exportStar(require("./readme.template"), exports);
+__exportStar(require("./components"), exports);
+__exportStar(require("./layout"), exports);
+__exportStar(require("./spartan"), exports);
+__exportStar(require("./playground.template"), exports);
+__exportStar(require("./shared/theme-service.template"), exports);
+__exportStar(require("./shared/profile-service.template"), exports);
+__exportStar(require("./shared/profile-component.template"), exports);

package/dist/templates/ui/layout/header.template.d.ts

@@ -0,0 +1,5 @@
+export declare function devkitHeaderTemplate(): {
+    ts: string;
+    html: string;
+    css: string;
+};

package/dist/templates/ui/layout/header.template.js

@@ -0,0 +1,236 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.devkitHeaderTemplate = devkitHeaderTemplate;
+function devkitHeaderTemplate() {
+    return {
+        ts: `import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { HlmButton } from '@spartan-ng/helm/button';
+import { HlmInput } from '@spartan-ng/helm/input';
+import { NgIconComponent } from '@ng-icons/core';
+
+export interface IUserProfile {
+  name: string;
+  avatar?: string;
+  role?: string;
+}
+
+@Component({
+  selector: 'devkit-header',
+  standalone: true,
+  imports: [CommonModule, HlmButton, HlmInput, NgIconComponent],
+  templateUrl: './header.component.html',
+  styleUrls: ['./header.component.css']
+})
+export class DevkitHeaderComponent {
+  @Input() showSearch = true;
+  @Input() showNotifications = true;
+  @Input() user: IUserProfile | null = null;
+  @Input() isSidebarCollapsed = false;
+  @Input() isDarkMode = false;
+
+  @Output() toggleSidebar = new EventEmitter<void>();
+  @Output() logout = new EventEmitter<void>();
+  @Output() toggleTheme = new EventEmitter<void>();
+  @Output() openProfile = new EventEmitter<void>();
+
+  isProfileDropdownOpen = false;
+
+  toggleProfileDropdown(): void {
+    this.isProfileDropdownOpen = !this.isProfileDropdownOpen;
+  }
+
+  onLogoutClick(): void {
+    this.isProfileDropdownOpen = false;
+    this.logout.emit();
+  }
+
+  onOpenProfile(): void {
+    this.isProfileDropdownOpen = false;
+    this.openProfile.emit();
+  }
+
+  onToggleTheme(): void {
+    this.toggleTheme.emit();
+  }
+}
+`,
+        html: `<header class="dt-header">
+  <div class="flex items-center space-x-4">
+    <!-- Botão de Toggle da Sidebar -->
+    <button hlmBtn variant="ghost" size="icon" (click)="toggleSidebar.emit()" class="dt-header-action" title="Menu">
+      <ng-icon name="lucideMenu" class="size-5"></ng-icon>
+    </button>
+    
+    <!-- Busca Global -->
+    <div *ngIf="showSearch" class="relative hidden md:block">
+      <input hlmInput type="text" placeholder="Buscar..." class="" />
+    </div>
+  </div>
+
+  <div class="flex items-center space-x-3">
+
+    <!-- Toggle Dark / Light Mode -->
+    <button
+      hlmBtn
+      variant="ghost"
+      size="icon"
+      class="dt-header-action"
+      [title]="isDarkMode ? 'Mudar para modo claro' : 'Mudar para modo escuro'"
+      (click)="onToggleTheme()"
+    >
+      <ng-icon *ngIf="isDarkMode" name="lucideSun" class="size-5"></ng-icon>
+      <ng-icon *ngIf="!isDarkMode" name="lucideMoon" class="size-5"></ng-icon>
+    </button>
+
+    <!-- Notificações -->
+    <button *ngIf="showNotifications" hlmBtn variant="ghost" size="icon" class="dt-header-action relative" title="Notificações">
+      <ng-icon name="lucideBell" class="size-5"></ng-icon>
+      <span class="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full"></span>
+    </button>
+ 
+    <!-- Linha Divisora -->
+    <div class="h-6 w-px bg-border"></div>
+ 
+    <!-- Perfil do Usuário -->
+    <div *ngIf="user" class="relative">
+      <button hlmBtn variant="ghost" (click)="toggleProfileDropdown()" class="flex items-center space-x-2 focus:outline-none py-1.5 px-2.5 rounded-md hover:bg-muted transition-colors">
+        <img *ngIf="user.avatar; else avatarFallback" [src]="user.avatar" [alt]="user.name" class="w-8 h-8 rounded-full object-cover border border-border" />
+        <ng-template #avatarFallback>
+          <div class="w-8 h-8 rounded-full flex items-center justify-center font-bold text-xs bg-primary text-primary-foreground">
+            {{ user.name.slice(0, 2).toUpperCase() }}
+          </div>
+        </ng-template>
+        <div class="hidden md:flex flex-col text-left">
+          <span class="text-sm font-semibold leading-none text-foreground">{{ user.name }}</span>
+          <span *ngIf="user.role" class="text-[10px] font-medium leading-none mt-1 text-muted-foreground">{{ user.role }}</span>
+        </div>
+      </button>
+ 
+      <!-- Dropdown -->
+      <div *ngIf="isProfileDropdownOpen" class="dt-header-dropdown">
+        <div class="px-4 py-3 border-b border-border">
+          <p class="text-sm font-bold text-foreground">{{ user.name }}</p>
+          <p *ngIf="user.role" class="text-xs text-muted-foreground mt-0.5">{{ user.role }}</p>
+        </div>
+        <button hlmBtn variant="ghost" (click)="onOpenProfile()" class="dt-header-dropdown-item">
+          <ng-icon name="lucideUser" class="size-4 mr-2"></ng-icon>
+          Editar Perfil
+        </button>
+        <div class="border-t border-border mx-2"></div>
+        <button hlmBtn variant="ghost" (click)="onLogoutClick()" class="dt-header-dropdown-item dt-header-dropdown-item--danger">
+          <ng-icon name="lucideLogOut" class="size-4 mr-2"></ng-icon>
+          Sair / Logout
+        </button>
+      </div>
+    </div>
+  </div>
+</header>
+`,
+        css: `:host {
+  display: block;
+  width: 100%;
+}
+
+.dt-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 64px;
+  padding: 0 24px;
+  background-color: var(--card);
+  color: var(--card-foreground);
+  border-bottom: 1px solid var(--border);
+  box-sizing: border-box;
+}
+
+.dt-header-action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: var(--radius);
+  color: var(--foreground);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.15s ease-in-out;
+}
+
+.dt-header-action:hover {
+  background-color: var(--muted);
+}
+
+.dt-header-search {
+  width: 240px;
+  background-color: var(--background);
+  color: var(--foreground);
+  border: 1px solid var(--input);
+  border-radius: 9999px;
+  padding: 8px 16px;
+  font-size: 13px;
+  outline: none;
+  font-family: var(--font-family);
+  transition: all 0.15s ease;
+}
+
+.dt-header-search:focus {
+  border-color: var(--ring);
+  width: 280px;
+}
+
+.dt-header-dropdown {
+  position: absolute;
+  right: 0;
+  top: calc(100% + 8px);
+  width: 220px;
+  background-color: var(--popover);
+  color: var(--popover-foreground);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  padding: 4px 0;
+  font-family: var(--font-family);
+}
+
+.dt-header-dropdown-item {
+  width: 100%;
+  padding: 10px 16px;
+  background: transparent;
+  border: none;
+  text-align: left;
+  font-size: 13px;
+  color: var(--popover-foreground);
+  cursor: pointer;
+  font-family: var(--font-family);
+  transition: background-color 0.15s ease-in-out;
+  display: flex;
+  align-items: center;
+}
+
+.dt-header-dropdown-item:hover {
+  background-color: var(--muted);
+}
+
+.dt-header-dropdown-item--danger {
+  color: var(--destructive);
+}
+
+.dt-header-dropdown-item--danger:hover {
+  background-color: color-mix(in srgb, var(--destructive) 10%, transparent);
+  color: var(--destructive);
+}
+
+@media (max-width: 768px) {
+  .dt-header {
+    padding: 0 16px;
+  }
+}
+`
+    };
+}
+// 13. Template do MainLayoutComponent

package/dist/templates/ui/layout/index.d.ts

@@ -0,0 +1,4 @@
+export * from './shell.template';
+export * from './sidebar.template';
+export * from './header.template';
+export * from './main-layout.template';