sn-tabs-x 0.0.1

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/sn-tabs",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "sn-tabs-x",
+  "version": "0.0.1",
+  "description": "SnTabs is an Angular 21 standalone tabs/tab panel component",
+  "author": {
+    "name": "Swapnil Nakate",
+    "email": "nakate.swapnil7@gmail.com",
+    "url": "https://swapnilnakate.in"
+  },
+  "peerDependencies": {
+    "@angular/common": "^21.0.0",
+    "@angular/core": "^21.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "bugs": {
+    "url": "https://github.com/swapnilnakate7/sn-ui/issues",
+    "email": "nakate.swapnil7@gmail.com"
+  },
+  "repository": {
+    "url": "https://github.com/swapnilnakate7/sn-ui",
+    "type": "git",
+    "directory": "projects/sn-tabs"
+  },
+  "license": "MIT"
+}

package/src/lib/sn-tabs-x.component.spec.ts

@@ -0,0 +1,37 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { SnTabsXComponent } from './sn-tabs-x.component';
+
+describe('SnTabsXComponent', () => {
+  let component: SnTabsXComponent;
+  let fixture: ComponentFixture<SnTabsXComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SnTabsXComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SnTabsXComponent);
+    component = fixture.componentInstance;
+    component.tabs = [
+      { label: 'Tab 1', content: 'Content 1' },
+      { label: 'Tab 2', content: 'Content 2' },
+    ];
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should default activeIndex to 0', () => {
+    expect(component.activeIndex).toBe(0);
+  });
+
+  it('should update activeIndex and emit tabChange when selectTab is called', () => {
+    let emittedIndex = -1;
+    component.tabChange.subscribe((i: number) => (emittedIndex = i));
+    component.selectTab(1);
+    expect(component.activeIndex).toBe(1);
+    expect(emittedIndex).toBe(1);
+  });
+});

package/src/lib/sn-tabs-x.component.ts

@@ -0,0 +1,25 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+export interface SnTab {
+  label: string;
+  content: string;
+}
+
+@Component({
+  selector: 'sn-tabs-x',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './sn-tabs-x.html',
+  styleUrl: 'sn-tabs-x.scss',
+})
+export class SnTabsXComponent {
+  @Input() tabs: SnTab[] = [];
+  @Input() activeIndex: number = 0;
+  @Output() tabChange = new EventEmitter<number>();
+
+  selectTab(index: number): void {
+    this.activeIndex = index;
+    this.tabChange.emit(index);
+  }
+}

package/src/lib/sn-tabs-x.html

@@ -0,0 +1,16 @@
+<div class="sn-tabs">
+  <div class="sn-tabs-bar" role="tablist">
+    @for (tab of tabs; track tab.label; let i = $index) {
+      <button
+        class="sn-tab-btn"
+        [class.active]="i === activeIndex"
+        (click)="selectTab(i)"
+        role="tab"
+        [attr.aria-selected]="i === activeIndex"
+      >{{ tab.label }}</button>
+    }
+  </div>
+  <div class="sn-tab-content" role="tabpanel">
+    {{ (activeIndex >= 0 && activeIndex < tabs.length) ? tabs[activeIndex].content : '' }}
+  </div>
+</div>

package/src/lib/sn-tabs-x.scss

@@ -0,0 +1,25 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.sn-tabs {
+  @apply w-full;
+
+  .sn-tabs-bar {
+    @apply flex border-b border-gray-200;
+  }
+
+  .sn-tab-btn {
+    @apply px-4 py-2 text-sm font-medium text-gray-500 border-b-2 border-transparent -mb-px cursor-pointer bg-transparent outline-none transition-colors;
+
+    &:hover { @apply text-gray-700; }
+
+    &.active {
+      @apply text-blue-600 border-blue-600;
+    }
+  }
+
+  .sn-tab-content {
+    @apply p-4 text-sm text-gray-700;
+  }
+}

package/src/public-api.ts

@@ -0,0 +1 @@
+export * from './lib/sn-tabs-x.component';

package/tsconfig.lib.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": ["**/*.spec.ts"]
+}

package/tsconfig.lib.prod.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/tsconfig.spec.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": ["jasmine"]
+  },
+  "include": ["**/*.spec.ts", "**/*.d.ts"]
+}