@ng-zen/cli 22.2.0 → 22.3.0-next.1

package/CHANGELOG.md

@@ -1,18 +1,12 @@
-## [22.2.0](https://github.com/kstepien3/ng-zen/compare/v22.1.0...v22.2.0) (2026-07-06)
+## [22.3.0-next.1](https://github.com/kstepien3/ng-zen/compare/v22.2.0...v22.3.0-next.1) (2026-07-10)
 
 ### 🚀 New Features
 
-* **textarea:** remove outdated autoresize TODO comment ([#435](https://github.com/kstepien3/ng-zen/issues/435)) ([73575c7](https://github.com/kstepien3/ng-zen/commit/73575c74e803d816612f74c5794ca97800bddb1c))
-* trigger 22.2.0-next.1 release ([803e0fa](https://github.com/kstepien3/ng-zen/commit/803e0faccbd41c77b8996227f034dbbda0fa2852))
-* **ui:** add reusable card component ([#428](https://github.com/kstepien3/ng-zen/issues/428)) ([f7acac6](https://github.com/kstepien3/ng-zen/commit/f7acac6b443b23c2710deaf3a763feb7f9269fbb))
-* **ui:** migrate controls for signals and clean up ([#417](https://github.com/kstepien3/ng-zen/issues/417)) ([08824f8](https://github.com/kstepien3/ng-zen/commit/08824f85096745bcf001700dc415afe1a6cdb52e))
-
-### 🐛 Bug Fixes
-
-* force release after failed npm publish for 22.1.0-next.1 ([3e4d4db](https://github.com/kstepien3/ng-zen/commit/3e4d4db2a602f05b13ca2a989abc923ccebf7207))
+* **ui/badge:** add component ([#439](https://github.com/kstepien3/ng-zen/issues/439)) ([ed1ccbc](https://github.com/kstepien3/ng-zen/commit/ed1ccbc3e29655d3c6f98ace327803e3fa4c7beb))
 
 ### 📚 Documentation
 
-* **storybook:** add Geist font and update base typography styles ([#429](https://github.com/kstepien3/ng-zen/issues/429)) ([296b2f2](https://github.com/kstepien3/ng-zen/commit/296b2f29197dacd491c4791a29d1026a17136201))
+* project information, descriptions, and SEO ([#450](https://github.com/kstepien3/ng-zen/issues/450)) ([162ca7e](https://github.com/kstepien3/ng-zen/commit/162ca7e525e0f1b967ef91e1e63fd89b04c57a3e))
+* **ui/card:** integrate zen-input in card stories ([#453](https://github.com/kstepien3/ng-zen/issues/453)) ([42d03b8](https://github.com/kstepien3/ng-zen/commit/42d03b842415eaa57ca3f199474820f6cc9756bd))
 
 Development mode - changelog will be generated during build.

package/README.md

@@ -32,20 +32,25 @@
     </a>
   </p>
 
-  <p><strong>Generate production-ready, customizable Angular UI components directly into your project 🚀</strong></p>
+  <p><strong>Standalone Angular UI Kit Generator — not a utility suite, not a rigid library.</strong> 
+<br/> Generate production-ready, customizable Angular UI components directly into your project 🚀</p>
 
-  <p>Stop wrestling with rigid UI libraries. @ng-zen/cli generates beautiful, modern Angular components <strong>as source code</strong> in your project, giving you complete control and ownership.</p>
+  <p>Stop wrestling with rigid UI libraries. **@ng-zen/cli** generates beautiful, modern Angular components <strong>as source code</strong> in your project, giving you complete control and ownership.</p>
 </div>
 
+<!-- TODO: Insert terminal recording GIF/WebM here showing the CLI in action -->
+
 ## 🎯 Why Choose @ng-zen/cli?
 
+Inspired by the philosophy of **shadcn/ui**, **@ng-zen/cli** brings the "own your components" approach natively to the modern Angular ecosystem.
+
 ### ✨ **Own Your Components**
 
 Unlike traditional UI libraries that give you `<library-button>` black boxes, @ng-zen generates **actual TypeScript, HTML, and SCSS files** directly into your project. You own the code, you control the future.
 
 ### 🏎️ **Instant Productivity**
 
-- **Production-Ready UI Elements:** Alert, Avatar, Button, Card, Checkbox, Dialog, Divider, Form Control, Icon, Input, Popover, Radio, Skeleton, Switch, Textarea
+- **Production-Ready UI Elements:** Alert, Avatar, Badge, Button, Card, Checkbox, Dialog, Divider, Form Control, Icon, Input, Popover, Radio, Skeleton, Switch, Textarea
 - **Zero Configuration:** Works with Angular 20+ out of the box
 - **Complete Setup:** Each component includes unit tests, Storybook stories, and documentation
 
@@ -80,6 +85,8 @@ Unlike traditional UI libraries that give you `<library-button>` black boxes, @n
 
 ## 🚀 Quick Start
 
+> 👀 **See it in action before installing:** [Live Storybook Demo](https://kstepien3.github.io/ng-zen/)
+
 The fastest way to get started:
 
 ```bash
@@ -150,6 +157,7 @@ export class MyComponent {}
 | ---------------- | -------------------------------- | ------------------------------------------------------------------------------ |
 | **Avatar**       | User profile images and initials | Image fallback, size variants, rounded styles                                  |
 | **Alert**        | Informational messages           | Customizable styles, dismissible options                                       |
+| **Badge**        | Status indicators and labels     | 6 variants, icons support, focus-visible ring                                  |
 | **Button**       | Interactive buttons              | Primary/secondary variants, loading states, icons                              |
 | **Card**         | Content container                | Multi-slot projection (header, title, subtitle, footer), CSS custom properties |
 | **Checkbox**     | Form checkboxes                  | Indeterminate state, custom styling, validation                                |

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ng-zen/cli",
-  "version": "22.2.0",
-  "description": "Angular UI components generator – Zen UI Kit CLI for schematics-based creation of customizable components like alert, avatar, button, card, checkbox, dialog, divider, form-control, icon, input, popover, radio, skeleton, switch, textarea with Storybook demos.",
+  "version": "22.3.0-next.1",
+  "description": "Angular CLI generator for creating fully customizable UI components.",
   "license": "BSD-2-Clause",
   "private": false,
   "repository": {
@@ -18,6 +18,9 @@
   },
   "homepage": "https://kstepien3.github.io/ng-zen/",
   "keywords": [
+    "shadcn",
+    "shadcn-ui",
+    "shadcn-angular",
     "angular",
     "angular-ui",
     "ui-kit",
@@ -47,6 +50,7 @@
     "ui components cli",
     "alert",
     "avatar",
+    "badge",
     "button",
     "card",
     "checkbox",
@@ -66,7 +70,6 @@
   },
   "schematics": "./schematics/collection.json",
   "packageManager": "pnpm@10.24.0",
-  "peerDependencies": {},
   "dependencies": {
     "@angular-devkit/core": "^22.0.1",
     "@angular-devkit/schematics": "^22.0.1",

package/schematics/ui/files/badge/badge.scss

@@ -0,0 +1,106 @@
+@use 'sass:map';
+
+$transition-duration: var(--zen-transition-duration, 0.2s);
+$outline: var(--zen-outline, 2px solid hsl(200deg 100% 50% / 50%));
+
+:host {
+  --zen-badge-shadow: 0 1px 2px hsl(0deg 0% 0% / 8%);
+  --zen-badge-neutral: var(--zen-neutral, hsl(30deg 5% 10%));
+  --zen-badge-primary: var(--zen-primary, hsl(193deg 58% 34%));
+  --zen-badge-success: var(--zen-success, hsl(142deg 38% 36%));
+  --zen-badge-warning: var(--zen-warning, hsl(36deg 72% 46%));
+  --zen-badge-danger: var(--zen-danger, hsl(348deg 52% 42%));
+  --zen-badge-info: var(--zen-info, hsl(214deg 34% 46%));
+}
+
+$colors: (
+  primary: var(--zen-badge-primary),
+  success: var(--zen-badge-success),
+  warning: var(--zen-badge-warning),
+  danger: var(--zen-badge-danger),
+  info: var(--zen-badge-info),
+);
+
+// Ghost variant opacity levels
+$ghost-hover-opacity: 10%;
+$ghost-active-opacity: 20%;
+
+:host {
+  --zen-badge-bg-color: var(--zen-badge-neutral);
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 1rem;
+  width: fit-content;
+  flex-shrink: 0;
+  gap: 0.25rem;
+  overflow: hidden;
+  border-radius: 625rem;
+  border: 1px solid transparent;
+  padding: 0.0625rem 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+  transition:
+    background-color $transition-duration ease,
+    color $transition-duration ease,
+    border-color $transition-duration ease;
+  user-select: none;
+  background-color: var(--zen-badge-bg-color);
+  color: var(--zen-badge-color, contrast-color(var(--zen-badge-bg-color)));
+}
+
+:host:focus-visible {
+  outline: $outline;
+  outline-offset: 2px;
+}
+
+:host > ::ng-deep svg {
+  pointer-events: none;
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
+:host([disabled]) {
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+// --- COLORS ---
+@each $name, $bg-color in $colors {
+  :host([data-color='#{$name}']) {
+    --zen-badge-bg-color: #{$bg-color};
+  }
+}
+
+// --- VARIANTS ---
+
+/* Outline variant */
+:host([data-variant='outline']) {
+  background-color: transparent;
+  color: var(--zen-badge-bg-color);
+  border-color: var(--zen-badge-bg-color);
+}
+
+/* Filled variant */
+:host([data-variant='filled']) {
+  background-color: color-mix(in oklch, var(--zen-badge-bg-color) 8%, transparent);
+  color: var(--zen-badge-bg-color);
+}
+
+/* Ghost variant */
+:host([data-variant='ghost']) {
+  background-color: transparent;
+  color: var(--zen-badge-bg-color);
+  box-shadow: none;
+
+  &:hover {
+    background-color: color-mix(in oklch, var(--zen-badge-bg-color) $ghost-hover-opacity, transparent);
+  }
+
+  &:active {
+    background-color: color-mix(in oklch, var(--zen-badge-bg-color) $ghost-active-opacity, transparent);
+  }
+}

package/schematics/ui/files/badge/badge.spec.ts

@@ -0,0 +1,58 @@
+import { provideZonelessChangeDetection } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { beforeEach, describe, expect, it } from 'vitest';
+
+import { ZenBadge } from './badge';
+
+describe('ZenBadge', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ZenBadge],
+      providers: [provideZonelessChangeDetection()],
+    }).compileComponents();
+  });
+
+  it('should create', () => {
+    const fixture = TestBed.createComponent(ZenBadge);
+    const component = fixture.componentInstance;
+    expect(component).toBeTruthy();
+  });
+
+  it('should have default color neutral', () => {
+    const fixture = TestBed.createComponent(ZenBadge);
+    fixture.detectChanges();
+    const badge = fixture.nativeElement as HTMLElement;
+    expect(badge.getAttribute('data-color')).toBe('neutral');
+  });
+
+  it('should have default variant solid', () => {
+    const fixture = TestBed.createComponent(ZenBadge);
+    fixture.detectChanges();
+    const badge = fixture.nativeElement as HTMLElement;
+    expect(badge.getAttribute('data-variant')).toBe('solid');
+  });
+
+  const colors = ['neutral', 'primary', 'success', 'warning', 'danger', 'info'] as const;
+
+  for (const color of colors) {
+    it(`should apply color ${color}`, () => {
+      const fixture = TestBed.createComponent(ZenBadge);
+      fixture.componentRef.setInput('color', color);
+      fixture.detectChanges();
+      const badge = fixture.nativeElement as HTMLElement;
+      expect(badge.getAttribute('data-color')).toBe(color);
+    });
+  }
+
+  const variants = ['solid', 'outline', 'filled', 'ghost'] as const;
+
+  for (const variant of variants) {
+    it(`should apply variant ${variant}`, () => {
+      const fixture = TestBed.createComponent(ZenBadge);
+      fixture.componentRef.setInput('variant', variant);
+      fixture.detectChanges();
+      const badge = fixture.nativeElement as HTMLElement;
+      expect(badge.getAttribute('data-variant')).toBe(variant);
+    });
+  }
+});

package/schematics/ui/files/badge/badge.stories.ts

@@ -0,0 +1,138 @@
+import { FavouriteIcon } from '@hugeicons/core-free-icons';
+import { argsToTemplate, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+
+import { ZenIcon } from '../icon';
+import { ZenBadge } from './badge';
+
+interface StoryParams {
+  color: 'neutral' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
+  variant: 'solid' | 'filled' | 'outline' | 'ghost';
+  label: string;
+}
+
+type Options = ZenBadge & StoryParams;
+
+export default {
+  title: 'Ui/Badge',
+  component: ZenBadge,
+  args: {
+    label: 'Badge',
+    color: 'neutral',
+    variant: 'solid',
+  },
+  argTypes: {
+    label: {
+      control: 'text',
+      table: {
+        category: 'story parameters',
+        type: {
+          summary: 'ng-content',
+        },
+      },
+    },
+    color: {
+      control: 'select',
+      options: ['neutral', 'primary', 'success', 'warning', 'danger', 'info'],
+    },
+    variant: {
+      control: 'select',
+      options: ['solid', 'filled', 'outline', 'ghost'],
+    },
+  },
+  render: ({ label, ...args }) => ({
+    props: args,
+    template: `<zen-badge ${argsToTemplate(args)}>${label}</zen-badge>`,
+  }),
+} satisfies Meta<Options>;
+
+type Story = StoryObj<Options>;
+
+export const Default: Story = {};
+
+export const WithIcon: Story = {
+  decorators: [moduleMetadata({ imports: [ZenIcon] })],
+  render: () => ({
+    props: { FavouriteIcon },
+    template: `
+      <div style="display: flex; gap: 0.5rem; flex-wrap: wrap">
+        <zen-badge color="primary">
+          <zen-icon [icon]="FavouriteIcon" [size]="12" [strokeWidth]="3" />
+          With Icon
+        </zen-badge>
+        <zen-badge variant="outline" color="primary">
+          <zen-icon [icon]="FavouriteIcon" [size]="12" [strokeWidth]="3" />
+          Outline
+        </zen-badge>
+      </div>
+    `,
+  }),
+};
+
+export const AllVariants: Story = {
+  render: () => ({
+    template: `
+      <div style="display: flex; gap: 0.5rem">
+        <zen-badge variant="solid">Solid</zen-badge>
+        <zen-badge variant="filled">Filled</zen-badge>
+        <zen-badge variant="outline">Outline</zen-badge>
+        <zen-badge variant="ghost">Ghost</zen-badge>
+      </div>
+    `,
+  }),
+};
+
+export const AllColorVariants: Story = {
+  render: () => ({
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 1rem;">
+        <!-- Default (No color attribute) -->
+        <div style="display: flex; gap: 0.5rem;">
+          <zen-badge variant="solid">Solid</zen-badge>
+          <zen-badge variant="filled">Filled</zen-badge>
+          <zen-badge variant="outline">Outline</zen-badge>
+          <zen-badge variant="ghost">Ghost</zen-badge>
+        </div>
+
+        <!-- Primary -->
+        <div style="display: flex; gap: 0.5rem;">
+          <zen-badge color="primary" variant="solid">Solid</zen-badge>
+          <zen-badge color="primary" variant="filled">Filled</zen-badge>
+          <zen-badge color="primary" variant="outline">Outline</zen-badge>
+          <zen-badge color="primary" variant="ghost">Ghost</zen-badge>
+        </div>
+
+        <!-- Success -->
+        <div style="display: flex; gap: 0.5rem;">
+          <zen-badge color="success" variant="solid">Solid</zen-badge>
+          <zen-badge color="success" variant="filled">Filled</zen-badge>
+          <zen-badge color="success" variant="outline">Outline</zen-badge>
+          <zen-badge color="success" variant="ghost">Ghost</zen-badge>
+        </div>
+
+        <!-- Warning -->
+        <div style="display: flex; gap: 0.5rem;">
+          <zen-badge color="warning" variant="solid">Solid</zen-badge>
+          <zen-badge color="warning" variant="filled">Filled</zen-badge>
+          <zen-badge color="warning" variant="outline">Outline</zen-badge>
+          <zen-badge color="warning" variant="ghost">Ghost</zen-badge>
+        </div>
+
+        <!-- Danger -->
+        <div style="display: flex; gap: 0.5rem;">
+          <zen-badge color="danger" variant="solid">Solid</zen-badge>
+          <zen-badge color="danger" variant="filled">Filled</zen-badge>
+          <zen-badge color="danger" variant="outline">Outline</zen-badge>
+          <zen-badge color="danger" variant="ghost">Ghost</zen-badge>
+        </div>
+
+        <!-- Info -->
+        <div style="display: flex; gap: 0.5rem;">
+          <zen-badge color="info" variant="solid">Solid</zen-badge>
+          <zen-badge color="info" variant="filled">Filled</zen-badge>
+          <zen-badge color="info" variant="outline">Outline</zen-badge>
+          <zen-badge color="info" variant="ghost">Ghost</zen-badge>
+        </div>
+      </div>
+    `,
+  }),
+};

package/schematics/ui/files/badge/badge.ts

@@ -0,0 +1,15 @@
+import { Component, input } from '@angular/core';
+
+@Component({
+  selector: 'zen-badge',
+  template: '<ng-content />',
+  styleUrl: './badge.scss',
+  host: {
+    '[attr.data-color]': 'color()',
+    '[attr.data-variant]': 'variant()',
+  },
+})
+export class ZenBadge {
+  readonly color = input<'neutral' | 'primary' | 'success' | 'warning' | 'danger' | 'info'>('neutral');
+  readonly variant = input<'solid' | 'outline' | 'filled' | 'ghost'>('solid');
+}

package/schematics/ui/files/badge/index.ts

@@ -0,0 +1 @@
+export * from './badge';

package/schematics/ui/files/card/card.stories.ts

@@ -1,6 +1,7 @@
 import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 
 import { ZenButton } from '../button';
+import { ZenInput } from '../input';
 import { ZenCard } from './card';
 
 interface StoryParams {
@@ -14,7 +15,7 @@ type Options = ZenCard & StoryParams;
 export default {
   title: 'Ui/Card',
   component: ZenCard,
-  decorators: [moduleMetadata({ imports: [ZenButton] })],
+  decorators: [moduleMetadata({ imports: [ZenButton, ZenInput] })],
   args: {
     content: 'This is the card content.',
     title: 'Card Title',
@@ -122,8 +123,8 @@ export const LoginForm: Story = {
         <h3 card-title>Login to your account</h3>
         <p card-subtitle>Enter your email below to login to your account</p>
         <div style="display: grid; gap: 0.75rem;">
-          <input type="email" placeholder="Email" style="border: 1px solid hsl(0deg 0% 80%); border-radius: 6px; padding: 0.5rem 0.75rem; font-size: 0.875rem;">
-          <input type="password" placeholder="Password" style="border: 1px solid hsl(0deg 0% 80%); border-radius: 6px; padding: 0.5rem 0.75rem; font-size: 0.875rem;">
+          <zen-input type="email" placeholder="Email" />
+          <zen-input type="password" placeholder="Password" />
           <a href="#" style="font-size: 0.75rem; color: hsl(0deg 0% 40%); text-align: right;">Forgot your password?</a>
         </div>
         <div card-footer style="display: flex; flex-direction: column; gap: 0.5rem;">

package/schematics/ui/files/input/input.scss

@@ -10,6 +10,11 @@ $error: var(--zen-error, hsl(0deg 70% 50%));
   --zen-input-placeholder-color: hsl(0deg 0% 60%);
 }
 
+/* stylelint-disable-next-line no-duplicate-selectors -- separate variables and styles */
+:host {
+  display: contents;
+}
+
 input {
   border: var(--zen-input-border);
   border-radius: var(--zen-input-border-radius);

package/schematics/ui/schema.js.map

@@ -1 +1 @@
-{"version":3,"file":"schema.js","sourceRoot":"","sources":["../../../../../src/schematics/ui/schema.ts"],"names":[],"mappings":"","sourcesContent":["import { Path } from '@angular-devkit/core';\n\nexport interface GeneratorSchemaBase {\n  currentDirectory: Path;\n  path?: Path;\n  stories: boolean;\n  project?: string;\n}\n\nexport type UiType =\n  | 'alert'\n  | 'avatar'\n  | 'button'\n  | 'card'\n  | 'checkbox'\n  | 'dialog'\n  | 'divider'\n  | 'form-control'\n  | 'icon'\n  | 'input'\n  | 'popover'\n  | 'radio'\n  | 'skeleton'\n  | 'switch'\n  | 'textarea';\n\nexport interface Schema extends GeneratorSchemaBase {\n  ui: UiType[];\n}\n"]}
+{"version":3,"file":"schema.js","sourceRoot":"","sources":["../../../../../src/schematics/ui/schema.ts"],"names":[],"mappings":"","sourcesContent":["import { Path } from '@angular-devkit/core';\n\nexport interface GeneratorSchemaBase {\n  currentDirectory: Path;\n  path?: Path;\n  stories: boolean;\n  project?: string;\n}\n\nexport type UiType =\n  | 'alert'\n  | 'avatar'\n  | 'badge'\n  | 'button'\n  | 'card'\n  | 'checkbox'\n  | 'dialog'\n  | 'divider'\n  | 'form-control'\n  | 'icon'\n  | 'input'\n  | 'popover'\n  | 'radio'\n  | 'skeleton'\n  | 'switch'\n  | 'textarea';\n\nexport interface Schema extends GeneratorSchemaBase {\n  ui: UiType[];\n}\n"]}

package/schematics/ui/schema.json

@@ -39,6 +39,7 @@
         "enum": [
           "alert",
           "avatar",
+          "badge",
           "button",
           "card",
           "checkbox",

package/schematics/ui/schema.ts

@@ -10,6 +10,7 @@ export interface GeneratorSchemaBase {
 export type UiType =
   | 'alert'
   | 'avatar'
+  | 'badge'
   | 'button'
   | 'card'
   | 'checkbox'