sn-badge 0.0.1

package/ng-package.json

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

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "sn-badge",
+  "version": "0.0.1",
+  "description": "SnBadge is an Angular 21 standalone badge/pill 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-badge"
+  },
+  "license": "MIT"
+}

package/src/lib/sn-badge.component.spec.ts

@@ -0,0 +1,33 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { SnBadgeComponent } from './sn-badge.component';
+
+describe('SnBadgeComponent', () => {
+  let component: SnBadgeComponent;
+  let fixture: ComponentFixture<SnBadgeComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SnBadgeComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SnBadgeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should default scheme to "default"', () => {
+    expect(component.scheme).toBe('default');
+  });
+
+  it('should default size to "md"', () => {
+    expect(component.size).toBe('md');
+  });
+
+  it('should default pill to false', () => {
+    expect(component.pill).toBeFalse();
+  });
+});

package/src/lib/sn-badge.component.ts

@@ -0,0 +1,24 @@
+import { Component, Input, booleanAttribute } from '@angular/core';
+import { CommonModule, NgClass } from '@angular/common';
+
+@Component({
+  selector: 'sn-badge',
+  standalone: true,
+  imports: [CommonModule, NgClass],
+  templateUrl: './sn-badge.html',
+  styleUrl: 'sn-badge.scss',
+})
+export class SnBadgeComponent {
+  @Input() scheme: string = 'default';
+  @Input({ transform: booleanAttribute }) pill: boolean = false;
+  @Input() size: string = 'md';
+
+  get classes(): Record<string, boolean> {
+    return {
+      'sn-badge': true,
+      [`scheme-${this.scheme}`]: true,
+      [`size-${this.size}`]: true,
+      'pill': this.pill,
+    };
+  }
+}

package/src/lib/sn-badge.html

@@ -0,0 +1,3 @@
+<span [ngClass]="classes">
+  <ng-content></ng-content>
+</span>

package/src/lib/sn-badge.scss

@@ -0,0 +1,20 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.sn-badge {
+  @apply inline-flex items-center font-medium leading-none;
+
+  &.size-sm { @apply px-2 py-0.5 text-xs; }
+  &.size-md { @apply px-2.5 py-1 text-sm; }
+  &.size-lg { @apply px-3 py-1.5 text-base; }
+
+  &.pill { @apply rounded-full; }
+  &:not(.pill) { @apply rounded; }
+
+  &.scheme-default { @apply bg-gray-100 text-gray-800; }
+  &.scheme-primary { @apply bg-blue-100 text-blue-800; }
+  &.scheme-warn    { @apply bg-yellow-100 text-yellow-800; }
+  &.scheme-danger  { @apply bg-red-100 text-red-800; }
+  &.scheme-success { @apply bg-green-100 text-green-800; }
+}

package/src/public-api.ts

@@ -0,0 +1 @@
+export * from './lib/sn-badge.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"]
+}