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

package/CHANGELOG.md

@@ -1,18 +1,8 @@
-## [22.2.0](https://github.com/kstepien3/ng-zen/compare/v22.1.0...v22.2.0) (2026-07-06)
-
-### 🚀 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))
+## [22.3.0-next.2](https://github.com/kstepien3/ng-zen/compare/v22.3.0-next.1...v22.3.0-next.2) (2026-07-11)
 
 ### 📚 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))
+* **README:** emphasize @ng-zen/cli ([#456](https://github.com/kstepien3/ng-zen/issues/456)) ([6306d4e](https://github.com/kstepien3/ng-zen/commit/6306d4efb5fef1b9a2de8790b4dc149e5069a5dd))
+* **README:** simplify content structure and highlight key features ([#457](https://github.com/kstepien3/ng-zen/issues/457)) ([6ff7d4d](https://github.com/kstepien3/ng-zen/commit/6ff7d4d296b5be3bd86fcc44193028afcfe25dd7))
 
 Development mode - changelog will be generated during build.

package/README.md

@@ -2,7 +2,7 @@
   <a href="https://kstepien3.github.io/ng-zen/">
     <img src="https://raw.githubusercontent.com/kstepien3/ng-zen/master/assets/logo.png" alt="@ng-zen/cli Logo" width="256" />
   </a>
-  
+
   <h1>@ng-zen/cli</h1>
 
   <p style="display: flex; gap: 1rem; justify-content: center;">
@@ -32,366 +32,195 @@
     </a>
   </p>
 
-  <p><strong>Generate production-ready, customizable Angular UI components directly into your project 🚀</strong></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>
+    <strong>Standalone Angular UI Kit Generator — the shadcn/ui alternative for Angular.</strong><br/>
+    Generate production-ready, highly customizable Angular UI components directly into your workspace. No rigid libraries, full code ownership.
+  </p>
 </div>
 
-## 🎯 Why Choose @ng-zen/cli?
-
-### ✨ **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
-- **Zero Configuration:** Works with Angular 20+ out of the box
-- **Complete Setup:** Each component includes unit tests, Storybook stories, and documentation
-
-### 🎨 **Built for Customization**
-
-- **CSS Variables:** Easy theming without touching component internals
-- **Editable SCSS:** Modify styles directly when you need deeper customization
-- **Modern Architecture:** Standalone components, OnPush change detection, Angular signals
-
-### 📚 **Developer Experience First**
-
-- **Interactive Documentation:** Live Storybook examples for every component
-- **TypeScript Ready:** Full type safety and IntelliSense support
-- **Test Coverage:** Generated components include comprehensive unit tests
-- **JSDoc Annotations:** Detailed inline documentation
+<!-- TODO: Insert terminal recording GIF/WebM here showing the CLI in action -->
 
-## Table of Contents
+---
 
-1. [Quick Start](#-quick-start)
-2. [Installation](#-installation)
-3. [Available Elements](#-available-uis)
-4. [Usage Examples](#-usage-examples)
-5. [Perfect For](#-perfect-for)
-6. [Advanced Features](#-advanced-features)
-7. [Documentation](#-documentation)
-8. [Project Status](#-project-status)
-9. [Contributing](#-contributing)
-10. [License](#license)
-11. [Author](#author)
-12. [See Also](#see-also)
-13. [FAQ](#faq)
+## 🚀 Getting Started
 
-## 🚀 Quick Start
+The fastest way to install the CLI and generate your first component.
 
-The fastest way to get started:
+**1. Add the package to your Angular 20+ project:**
 
 ```bash
 ng add @ng-zen/cli
 ```
 
-This command:
-
-- ✅ Installs the package
-- ✅ Sets up your project configuration
-- ✅ Ready to generate components
-
-Then generate your first component:
+**2. Generate UI components (interactive mode):**
 
 ```bash
 ng generate @ng-zen/cli:ui
 ```
 
-Select components from an interactive menu and they'll be generated in the `ui` folder within your project's source directory (e.g., `src/app/ui`)! 🎉
-
-## 📦 Installation
-
-### Recommended: Using ng add
-
-```bash
-ng add @ng-zen/cli
-```
-
-### Manual Installation
-
-```bash
-# Stable version
-pnpm add -D @ng-zen/cli
-
-# Latest features and fixes
-pnpm add -D @ng-zen/cli@next
-```
-
-### Icon Library (Optional)
-
-To use the `zen-icon` component, install an icon library:
-
-```bash
-# Using HugeIcons (recommended)
-pnpm add @hugeicons/core-free-icons
-
-# Or use any other SVG icon library
-```
-
-Then import icons and pass them to the component:
+**3. Use the generated standalone component:**
 
 ```typescript
-import { CheckmarkIcon } from '@hugeicons/core-free-icons';
-import { ZenIcon } from '@ng-zen/cli';
+import { ZenButton } from './ui/button';
 
 @Component({
-  imports: [ZenIcon],
+  imports: [ZenButton],
   template: `
-    <zen-icon [icon]="CheckmarkIcon" />
+    <button variant="primary" zen-button>Action</button>
   `,
 })
 export class MyComponent {}
 ```
 
-## 🧩 Available UIs
+## Table of Contents
 
-| Component        | Description                      | Features                                                                       |
-| ---------------- | -------------------------------- | ------------------------------------------------------------------------------ |
-| **Avatar**       | User profile images and initials | Image fallback, size variants, rounded styles                                  |
-| **Alert**        | Informational messages           | Customizable styles, dismissible options                                       |
-| **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                                |
-| **Dialog**       | Native modal dialogs             | Native dialog element, service API, size variants, backdrop config             |
-| **Divider**      | Visual separators                | Horizontal/vertical, with labels, custom thickness                             |
-| **Form Control** | Form field wrapper               | Labels, validation messages, required indicators                               |
-| **Icon**         | SVG icon system                  | Huge Icons integration, size variants, colors                                  |
-| **Input**        | Text input fields                | Validation states, prefixes/suffixes, types                                    |
-| **Popover**      | Native Popover API directive     | Template/string content, placements, click toggle, CSS anchor positioning      |
-| **Radio**        | Form radio buttons               | Group selection, two-way binding, custom styling, disabled state               |
-| **Skeleton**     | Loading placeholders             | Multiple shapes, animation, responsive                                         |
-| **Switch**       | Toggle controls                  | On/off states, disabled state, custom labels                                   |
-| **Textarea**     | Multi-line text input            | Auto-resize, character counts, validation                                      |
-
-> 💡 **More components coming soon!** Planned: Directives, Pipes, Services, and additional UI elements.
-
-## 💡 Usage Examples
-
-### Basic Component Generation
+1. [Getting Started](#-getting-started)
+2. [Features](#-features)
+3. [CLI Usage & Options](#-cli-usage--options)
+4. [Available UIs](#-available-uis)
+5. [Customization](#-customization)
+6. [Philosophy & Architecture](#-philosophy--architecture)
+7. [Community & Contributions](#-community--contributions)
+8. [Documentation & Links](#-documentation--links)
 
-```bash
-# Interactive mode - choose components from a menu  (default path: src/app/ui if not provided)
-ng generate @ng-zen/cli:ui
+## ✨ Features
+
+- **Signal First Architecture:** Designed natively for Angular's reactive model. Full support for Signal Inputs, Queries, Model signals, and the new **Signal Forms** API.
+- **Own Your Code:** Components are generated as raw `.ts`, `.html`, and `.scss` files directly in your project. You control the implementation.
+- **Agnostic Styling:** Built with raw SCSS and CSS Variables. No forced dependencies on Tailwind CSS, but fully adaptable if needed.
+- **Modern Angular:** Leverages Standalone Components, OnPush change detection, and eliminates unnecessary RxJS overhead in UI layers.
+- **Production Ready:** Includes Vitest unit tests, Storybook stories, and accessibility features out of the box.
 
-# Generate specific UI elements
-ng generate @ng-zen/cli:ui --ui avatar button
+## 🛠️ CLI Usage & Options
 
-# Custom location
-ng generate @ng-zen/cli:ui ./src/app/custom --ui input checkbox
+Generate multiple components at once, specify custom paths, or include Storybook documentation files directly from the terminal.
 
-# Include Storybook stories
-ng generate @ng-zen/cli:ui --ui button --stories
+```bash
+ng generate @ng-zen/cli:ui [path] --ui <elements...> --stories
 ```
 
-### What Gets Generated
+### Arguments & Flags
 
-Each component set includes:
+| Property        | Status     | Default       | Description                                                                                                                  |
+| :-------------- | :--------- | :------------ | :--------------------------------------------------------------------------------------------------------------------------- |
+| **`[path]`**    | _Optional_ | `src/app/ui`  | The directory where components will be generated (e.g., `./src/app/shared/components`).                                      |
+| **`--ui`**      | _Required_ | -             | A space-separated list of components to generate (e.g., `button`, `alert`, `dialog`). Interactive prompt appears if omitted. |
+| **`--stories`** | _Optional_ | `false`       | Generates `.stories.ts` files alongside the component, instantly ready for your Storybook integration.                       |
+| **`--project`** | _Optional_ | auto-detected | Specify the target project name in a multi-project workspace.                                                                |
 
-```
-src/app/ui/
-├── button/
-│   ├── button.ts           # Component logic
-│   ├── button.scss         # Customizable styles
-│   ├── button.spec.ts      # Unit tests
-│   ├── button.stories.ts   # Storybook documentation
-│   ├── index.ts           # Barrel exports
-│   └── README.md          # Component-specific docs
-└── input/
-    ├── input.ts
-    ├── input.scss
-    ├── input.spec.ts
-    ├── input.stories.ts
-    ├── index.ts
-    └── README.md
-```
+### Examples
 
-### Real-World Usage
+**Interactive mode (Recommended):**
 
-```typescript
-// After generation, import and use like any Angular component
-import { ZenButton } from './ui/button';
-import { ZenInput } from './ui/input';
+```bash
+ng generate @ng-zen/cli:ui
+```
 
-@Component({
-  selector: 'app-login',
-  imports: [ZenButton, ZenInput],
-  template: `
-    <form>
-      <zen-input placeholder="Enter email" type="email" />
-      <button variant="primary" zen-button>Sign In</button>
-    </form>
-  `,
-})
-export class LoginComponent {}
+**Generate specific components to a custom path:**
+
+```bash
+ng generate @ng-zen/cli:ui ./src/app/shared/components --ui avatar badge card
 ```
 
-## 🎯 Perfect For
+**Generate components with Storybook files:**
 
-### 🏢 **Enterprise Teams**
+```bash
+ng generate @ng-zen/cli:ui --ui button input --stories
+```
 
-- Build consistent internal component libraries
-- Maintain design system compliance across projects
-- Avoid vendor lock-in with owned source code
+## 🧩 Available UIs
 
-### 🚀 **Startup Projects**
+### Forms & Inputs
 
-- Rapid prototyping with production-ready components
-- Easy customization as requirements evolve
-- No licensing concerns or bundle size bloat
+| Component        | Description           | Features                                                         |
+| ---------------- | --------------------- | ---------------------------------------------------------------- |
+| **Checkbox**     | Form checkboxes       | Indeterminate state, custom styling, validation                  |
+| **Form Control** | Form field wrapper    | Labels, validation messages, required indicators                 |
+| **Input**        | Text input fields     | Validation states, prefixes/suffixes, types                      |
+| **Radio**        | Form radio buttons    | Group selection, two-way binding, custom styling, disabled state |
+| **Switch**       | Toggle controls       | On/off states, disabled state, custom labels                     |
+| **Textarea**     | Multi-line text input | Auto-resize, character counts, validation                        |
 
-### 👩‍💻 **Angular Developers**
+### Data Display
 
-- Learn modern Angular patterns (signals, standalone components)
-- Speed up UI development workflow
-- Maintain full control over component behavior
+| Component   | Description                      | Features                                                                       |
+| ----------- | -------------------------------- | ------------------------------------------------------------------------------ |
+| **Avatar**  | User profile images and initials | Image fallback, size variants, rounded styles                                  |
+| **Badge**   | Status indicators and labels     | 6 variants, icons support, focus-visible ring                                  |
+| **Card**    | Content container                | Multi-slot projection (header, title, subtitle, footer), CSS custom properties |
+| **Divider** | Visual separators                | Horizontal/vertical, with labels, custom thickness                             |
+| **Icon**    | SVG icon system                  | Built to support any SVG icon library. Size variants, colors                   |
 
-### 🎨 **Design Systems**
+### Feedback
 
-- Use as foundation for custom component libraries
-- Extend and modify components to match brand guidelines
-- Generate consistent documentation automatically
+| Component    | Description            | Features                                 |
+| ------------ | ---------------------- | ---------------------------------------- |
+| **Alert**    | Informational messages | Customizable styles, dismissible options |
+| **Skeleton** | Loading placeholders   | Multiple shapes, animation, responsive   |
 
-## ⚡ Advanced Features
+### Actions & Overlays
 
-### **Modern Angular Architecture**
+| Component   | Description                  | Features                                                                  |
+| ----------- | ---------------------------- | ------------------------------------------------------------------------- |
+| **Button**  | Interactive buttons          | Primary/secondary variants, loading states, icons                         |
+| **Dialog**  | Native modal dialogs         | Native dialog element, service API, size variants, backdrop config        |
+| **Popover** | Native Popover API directive | Template/string content, placements, click toggle, CSS anchor positioning |
 
-- **Standalone Components:** No NgModule dependencies
-- **OnPush Change Detection:** Optimized performance
-- **Angular Signals:** Reactive state management
-- **TypeScript 5.8+:** Latest language features
+## 🎨 Customization
 
-### **Customization System**
+Every generated component utilizes CSS variables for immediate theming without touching the core logic. Overwrite them globally or locally:
 
 ```scss
-// Easy theming with CSS variables
+/* styles.scss */
 :root {
-  --zen-button-primary-bg: #your-brand-color;
-  --zen-button-border-radius: 8px;
-  --zen-button-font-weight: 600;
+  /* Global theme variables */
+  --zen-primary: hsl(221deg 83% 53%);
+  --zen-transition-duration: 0.3s;
+  --zen-outline: 2px solid hsl(221deg 83% 53% / 50%);
+
+  /* Component-specific overrides */
+  --zen-button-primary: hsl(221deg 83% 40%);
+  --zen-button-shadow: 0 4px 6px hsl(0deg 0% 0% / 15%);
 }
 ```
 
-### **Testing Integration**
-
-- **Vitest Ready:** All tests use Vitest framework for fast, modern unit testing
-- **Component Testing:** Isolated unit tests for each component
-- **Storybook Testing:** Visual testing and documentation
-
-### **Development Tools**
-
-- **ESLint Integration:** Code quality enforcement
-- **Prettier Support:** Consistent code formatting
-- **Husky Hooks:** Pre-commit validation
-
-## 📚 Documentation
-
-- **📖 [Live Storybook Demo](https://kstepien3.github.io/ng-zen/)** - Interactive component examples
-- **🔧 [Development Guide](https://github.com/kstepien3/ng-zen/blob/master/DEVELOPMENT.md)** - Setup and contribution workflow
-- **🤝 [Contributing Guide](https://github.com/kstepien3/ng-zen/blob/master/CONTRIBUTING.md)** - How to contribute to the project
-- **📝 [Changelog](https://github.com/kstepien3/ng-zen/blob/master/CHANGELOG.md)** - Version history and breaking changes
-- **💬 Component READMEs** - Detailed docs generated with each component
-
-## 🚧 Project Status
-
-**🟢 Actively Developed & Production Ready**
-
-- ✅ **Core Features:** Component generation is stable and tested
-- ✅ **Angular 20+ Support:** Compatible with latest Angular versions
-- 🔄 **Continuous Improvement:** Regular updates and new components
-- 📋 **Roadmap:** Directives, pipes, services, and more UI components planned
-
-### Release Channels
-
-- **`@ng-zen/cli`** - Stable releases from `master` branch
-- **`@ng-zen/cli@next`** - Pre-releases from `next` branch with latest features
-
-> **Important:** Since @ng-zen/cli generates code into your project, you own that code completely. Updates to the CLI primarily add new features and components - they won't break your existing generated components.
-
-## 🤝 Contributing
+For structural changes (e.g., modifying the default `0.625rem` border radius or internal padding), simply edit the generated `.scss` files in your `./ui` directory.
 
-We welcome contributions! Whether it's:
+## 🏛️ Philosophy & Architecture
 
-- 🐛 **Bug Reports** - Help us improve reliability
-- 💡 **Feature Requests** - Suggest new components or capabilities
-- 🔧 **Code Contributions** - Add features or fix issues
-- 📚 **Documentation** - Improve guides and examples
+### Perfect For
 
-> 🚀 **Do you urgently need some new features? Report them in the [`issues`](https://github.com/kstepien3/ng-zen/issues) section! They will be scheduled for the next deployments.**
+- **Enterprise Teams:** Build consistent internal design systems without vendor lock-in.
+- **Startup Projects:** Rapid prototyping with components that can be easily customized as requirements scale.
+- **Angular Developers:** Maintain full control over component behavior while enforcing modern Angular patterns (Signals, Signal Forms, Standalone).
 
-**Getting Started:**
+### Advanced Details
 
-1. Read our [Contributing Guidelines](https://github.com/kstepien3/ng-zen/blob/master/CONTRIBUTING.md)
-2. Check the [Development Setup](https://github.com/kstepien3/ng-zen/blob/master/DEVELOPMENT.md)
-3. Browse [open issues](https://github.com/kstepien3/ng-zen/issues)
-4. Join the discussion!
+- **Zero Configuration:** Works seamlessly with standard Angular CLI workspaces.
+- **Reactive by Design:** Built from the ground up to utilize Angular Signals for state management, making integration with modern state libraries and Signal Forms seamless.
+- **Continuous Updates:** Updating `@ng-zen/cli` brings new features and component blueprints, but will **never** overwrite or break your already generated code.
+- **Icon Agnostic:** The optional `zen-icon` is built to be completely library-agnostic. While `@hugeicons/core-free-icons` is used in examples, you can integrate it with any SVG icon provider.
 
-## License
+## 🤝 Community & Contributions
 
-This project is licensed under the [BSD 2-Clause License](https://github.com/kstepien3/ng-zen/blob/master/LICENSE) 📜.
+**Built by developers, for developers.**
 
-## Author
+This project is actively developed and shaped by community feedback. We are highly open to suggestions, new features, and improvements.
 
-**Konrad Stępień** - Creator & Maintainer
-
-- 🐙 GitHub: [@kstepien3](https://github.com/kstepien3)
-- 💼 LinkedIn: [Konrad Stępień](https://www.linkedin.com/in/konradstepien/)
-- 📧 Email: [kord.stp@gmail.com](mailto:kord.stp@gmail.com?subject=%5BNG-ZEN%5D%20Question)
-
-## See Also
-
-- **[ngx-schematic-builder](https://github.com/kstepien3/ngx-schematic-builder)** - Custom Angular builder for compiling schematics (used by this project)
-
-## FAQ
-
-### ❓ **How is this different from Angular Material or PrimeNG?**
-
-Traditional UI libraries give you pre-compiled components that you can't modify. @ng-zen/cli generates the actual source code into your project, so you have complete control. You can modify the TypeScript, HTML, and SCSS files however you need.
-
-### ❓ **Can I customize the generated components?**
-
-Absolutely! That's the whole point. Every component is generated as editable source code in your project. You can:
-
-- Modify the TypeScript logic
-- Change the HTML templates
-- Customize the SCSS styles
-- Extend functionality as needed
-
-### ❓ **What happens when I update @ng-zen/cli?**
-
-Updates to the CLI add new features and components but don't affect your already-generated code. Your components belong to you and won't be overwritten. You can always generate new components with the latest features.
-
-### ❓ **Does this work with existing Angular projects?**
-
-Yes! @ng-zen/cli works with any Angular 20+ project. Just run `ng add @ng-zen/cli` in your existing project and start generating components.
-
-### ❓ **Can I use this in production?**
-
-Definitely! The generated components are production-ready with:
-
-- Full TypeScript type safety
-- Comprehensive unit tests
-- Optimized performance (OnPush change detection)
-- Accessibility considerations
-- Modern Angular best practices
-
-### ❓ **How do I theme the components?**
-
-Components use CSS variables for easy theming:
-
-```scss
-:root {
-  --zen-primary-color: #your-brand-color;
-  --zen-border-radius: 8px;
-}
-```
+- **Missing a component?** Open a feature request.
+- **Found a bug?** Submit an issue.
+- **Have an idea?** Start a discussion.
 
-For deeper customization, edit the generated SCSS files directly.
+We prioritize community requests in our roadmap. [Report issues or suggest features here](https://github.com/kstepien3/ng-zen/issues).
 
-### ❓ **Why no Tailwind CSS?**
+## 📚 Documentation & Links
 
-You can tweak the code to use Tailwind if you want, but avoid adding extra libraries. Our goal is to create base components that are easy to improve later, work without any CSS libraries, and are fully customizable right out of the box.
+- **📖 [Live Storybook Demo](https://kstepien3.github.io/ng-zen/)** - Interactive examples
+- **🤝 [Contributing Guide](https://github.com/kstepien3/ng-zen/blob/master/CONTRIBUTING.md)** - Workflow & bug reporting
+- **📝 [Releases & Changelog](https://github.com/kstepien3/ng-zen/releases)** - Version history and release notes
+- **📦 [ngx-schematic-builder](https://github.com/kstepien3/ngx-schematic-builder)** - Custom compiler for this project
 
 ---
 
-**Ready to take control of your Angular UI components?** [Get started now!](#-quick-start) 🚀
+**License:** [BSD 2-Clause](https://github.com/kstepien3/ng-zen/blob/master/LICENSE)  
+**Maintainer:** Konrad Stępień ([@kstepien3](https://github.com/kstepien3))

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.2",
+  "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'