@ng-zen/cli 19.1.0 → 19.2.0-next.1

package/.github/workflows/deploy.yml

@@ -2,7 +2,8 @@ name: Deploy Storybook to github pages
 
 on:
   push:
-    branches: ["master"]
+    tags:
+      - 'v*.*.*'
   workflow_dispatch:
 
 env:
@@ -18,14 +19,21 @@ jobs:
   deploy:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4 # Checkout your repository
-      - uses: pnpm/action-setup@v4
+      - name: Checkout code
+        uses: actions/checkout@v4
+      - name: Enable Corepack
+        run: corepack enable
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
         with:
           version: ${{ env.PNPM_VERSION }}
-      - uses: actions/setup-node@v4
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ env.NODE_VERSION }}
-      - id: build-publish
+          cache: 'pnpm'
+      - name: Build and deploy Storybook
+        id: build-publish
         uses: bitovi/github-actions-storybook-to-github-pages@v1.0.3
         with:
           install_command: pnpm install --frozen-lockfile

package/.github/workflows/release.yml

@@ -20,6 +20,7 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v4
         with:
+          persist-credentials: false
           fetch-depth: 0
           fetch-tags: true
       - name: Enable Corepack

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## 19.2.0-next.1 (2025-05-23)
+
+* chore(dependencies): update dependencies (#187) ([7028a9e](https://github.com/kstepien3/ng-zen/commit/7028a9e)), closes [#187](https://github.com/kstepien3/ng-zen/issues/187)
+* chore(dependencies): update ngx-schematic-builder to v0.2.0 (#183) ([5ea0cea](https://github.com/kstepien3/ng-zen/commit/5ea0cea)), closes [#183](https://github.com/kstepien3/ng-zen/issues/183)
+* chore(workflow): update deploy workflow for tag-based triggering (#166) ([0fea522](https://github.com/kstepien3/ng-zen/commit/0fea522)), closes [#166](https://github.com/kstepien3/ng-zen/issues/166) [#165](https://github.com/kstepien3/ng-zen/issues/165)
+* chore(workflows): disable persist-credentials in release workflow (#188) ([b784e47](https://github.com/kstepien3/ng-zen/commit/b784e47)), closes [#188](https://github.com/kstepien3/ng-zen/issues/188)
+* feat(divider): add zen-divider component (#186) ([c021773](https://github.com/kstepien3/ng-zen/commit/c021773)), closes [#186](https://github.com/kstepien3/ng-zen/issues/186)
+* style(components): update outline styles (#184) ([5737a15](https://github.com/kstepien3/ng-zen/commit/5737a15)), closes [#184](https://github.com/kstepien3/ng-zen/issues/184)
+* fix(schematics/ng-add): run other schematics after installation (#177) ([5cb1be4](https://github.com/kstepien3/ng-zen/commit/5cb1be4)), closes [#177](https://github.com/kstepien3/ng-zen/issues/177)
+* ci(eslint): fix plugins and configure linting rules (#176) ([5e93a09](https://github.com/kstepien3/ng-zen/commit/5e93a09)), closes [#176](https://github.com/kstepien3/ng-zen/issues/176)
+* build(deps-dev): bump typescript from 5.7.3 to 5.8.3 (#154) ([3ebe49f](https://github.com/kstepien3/ng-zen/commit/3ebe49f)), closes [#154](https://github.com/kstepien3/ng-zen/issues/154)
+* build(ngx-schematic-builder): migrate the custom builder (#175) ([c7d19eb](https://github.com/kstepien3/ng-zen/commit/c7d19eb)), closes [#175](https://github.com/kstepien3/ng-zen/issues/175)
+* Merge remote-tracking branch 'origin/next' into develop ([f581d01](https://github.com/kstepien3/ng-zen/commit/f581d01))
+
 ## [19.1.0](https://github.com/kstepien3/ng-zen/compare/v19.0.0...v19.1.0) (2025-04-27)
 
 ### 🚀 New Features

package/README.md

@@ -11,7 +11,7 @@
 
 Generate modern, customizable Angular UI components and elements directly into your project 🚀
 
-Built with best practices and developer experience in mind 💡
+Built with the best practices and developer experience in mind 💡
 
 ## Table of Contents
 
@@ -27,7 +27,8 @@ Built with best practices and developer experience in mind 💡
 10. [Contributing](#contributing)
 11. [License](#license)
 12. [Author](#author)
-13. [FAQ](#faq)
+13. [See also](#see-also)
+14. [FAQ](#faq)
 
 ## Features
 
@@ -148,6 +149,10 @@ Maintained by Konrad Stępień.
 - LinkedIn: [Konrad Stępień](https://www.linkedin.com/in/konradstepien/) 👥
 - Email: [kord.stp@gmail.com](mailto:kord.stp@gmail.com?subject=%5BNG-ZEN%5D%20Query) 📨
 
+## See also
+
+- [ngx-schematic-builder](https://github.com/kstepien3/ngx-schematic-builder) - A custom Angular builder for compiling and bundling Angular schematics.
+
 ## FAQ
 
 ### How do I customize a generated component?

package/angular.json

@@ -20,9 +20,9 @@
       "prefix": "zen",
       "architect": {
         "build": {
-          "builder": "./projects/schematic-builder:build",
+          "builder": "ngx-schematic-builder:build",
           "options": {
-            "files": ["src/**", "README.md", "package.json", "LICENSE", "CHANGELOG.md"],
+            "files": ["src/**", "README.md", "LICENSE", "CHANGELOG.md"],
             "tsConfig": "tsconfig.schematics.json"
           }
         },

package/eslint.config.js

@@ -2,8 +2,15 @@
 const eslint = require('@eslint/js');
 const tseslint = require('typescript-eslint');
 const angular = require('angular-eslint');
+const prettierRecommended = require('eslint-plugin-prettier/recommended');
+const eslintPluginImport = require('eslint-plugin-import');
+const simpleImportSort = require('eslint-plugin-simple-import-sort');
+const unicorn = require('eslint-plugin-unicorn');
+const unusedImports = require('eslint-plugin-unused-imports');
+const storybook = require('eslint-plugin-storybook');
 
 module.exports = tseslint.config(
+  ...storybook.configs['flat/recommended'],
   {
     files: ['**/*.ts'],
     extends: [
@@ -13,6 +20,12 @@ module.exports = tseslint.config(
       ...angular.configs.tsRecommended,
     ],
     processor: angular.processInlineTemplates,
+    plugins: {
+      'simple-import-sort': simpleImportSort,
+      'import/recommended': eslintPluginImport.flatConfigs,
+      unicorn: unicorn,
+      'unused-imports': unusedImports,
+    },
     rules: {
       '@angular-eslint/directive-selector': [
         'error',
@@ -30,11 +43,31 @@ module.exports = tseslint.config(
           style: 'kebab-case',
         },
       ],
+      'simple-import-sort/imports': 'warn',
+      'simple-import-sort/exports': 'warn',
+      'unused-imports/no-unused-imports': 'warn',
     },
   },
   {
     files: ['**/*.html'],
     extends: [...angular.configs.templateRecommended, ...angular.configs.templateAccessibility],
-    rules: {},
+    rules: {
+      '@angular-eslint/template/prefer-self-closing-tags': ['error'],
+    },
+  },
+  {
+    files: ['**/*.html', '**/*.ts'],
+    extends: [prettierRecommended],
+    rules: {
+      'prettier/prettier': [
+        'warn',
+        {
+          endOfLine: 'auto',
+        },
+      ],
+    },
+  },
+  {
+    ignores: ['!.storybook'],
   }
 );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-zen/cli",
-  "version": "19.1.0",
+  "version": "19.2.0-next.1",
   "description": "A CLI tool for generating customizable, modern Angular UI components using schematics.",
   "scripts": {
     "ng": "ng",
@@ -55,77 +55,72 @@
     "@angular/core": ">=19.0.0"
   },
   "dependencies": {
-    "@angular-devkit/core": "^19.1.7",
-    "@angular-devkit/schematics": "^19.1.7",
+    "@angular-devkit/core": "^19.2.13",
+    "@angular-devkit/schematics": "^19.2.13",
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@angular-builders/jest": "^19.0.0",
-    "@angular-devkit/architect": "^0.1902.6",
-    "@angular-devkit/build-angular": "^19.1.5",
+    "@angular-builders/jest": "^19.0.1",
+    "@angular-devkit/architect": "^0.1902.13",
+    "@angular-devkit/build-angular": "^19.2.13",
     "@angular-devkit/core": "^19.1.7",
-    "@angular/animations": "^19.1.5",
-    "@angular/cli": "^19.1.7",
-    "@angular/common": "^19.1.5",
-    "@angular/compiler": "^19.1.5",
-    "@angular/compiler-cli": "^19.1.5",
-    "@angular/core": "^19.1.5",
-    "@angular/forms": "^19.1.5",
-    "@angular/platform-browser": "^19.1.5",
-    "@angular/platform-browser-dynamic": "^19.1.5",
-    "@angular/router": "^19.1.5",
+    "@angular/animations": "^19.2.12",
+    "@angular/cli": "^19.2.13",
+    "@angular/common": "^19.2.12",
+    "@angular/compiler": "^19.2.12",
+    "@angular/compiler-cli": "^19.2.12",
+    "@angular/core": "^19.2.12",
+    "@angular/forms": "^19.2.12",
+    "@angular/platform-browser": "^19.2.12",
+    "@angular/platform-browser-dynamic": "^19.2.12",
+    "@angular/router": "^19.2.12",
     "@chromatic-com/storybook": "^3.2.6",
-    "@commitlint/cli": "^19.7.1",
-    "@commitlint/config-conventional": "^19.8.0",
+    "@commitlint/cli": "^19.8.1",
+    "@commitlint/config-conventional": "^19.8.1",
     "@compodoc/compodoc": "^1.1.26",
-    "@eslint/js": "^9.22.0",
+    "@eslint/js": "^9.27.0",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/commit-analyzer": "^13.0.1",
     "@semantic-release/git": "^10.0.1",
-    "@semantic-release/github": "^11.0.1",
+    "@semantic-release/github": "^11.0.2",
     "@semantic-release/npm": "^12.0.1",
     "@semantic-release/release-notes-generator": "^14.0.3",
-    "@storybook/addon-docs": "^8.5.5",
-    "@storybook/addon-essentials": "^8.5.5",
-    "@storybook/addon-interactions": "^8.5.5",
-    "@storybook/addon-links": "^8.6.12",
-    "@storybook/addon-onboarding": "^8.5.5",
-    "@storybook/angular": "^8.5.3",
-    "@storybook/blocks": "^8.5.3",
-    "@storybook/test": "^8.5.5",
+    "@storybook/addon-docs": "^8.6.14",
+    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/addon-interactions": "^8.6.14",
+    "@storybook/addon-links": "^8.6.14",
+    "@storybook/addon-onboarding": "^8.6.14",
+    "@storybook/angular": "^8.6.14",
+    "@storybook/blocks": "^8.6.14",
+    "@storybook/test": "^8.6.14",
     "@types/jest": "29.5.14",
-    "angular-eslint": "19.3.0",
-    "conventional-changelog-conventionalcommits": "^8.0.0",
+    "angular-eslint": "19.4.0",
     "copyfiles": "^2.4.1",
     "cpy": "^11.1.0",
-    "eslint": "^9.20.0",
-    "eslint-config-prettier": "^10.0.1",
+    "eslint": "^9.27.0",
+    "eslint-config-prettier": "^10.1.5",
     "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-prettier": "^5.2.3",
+    "eslint-plugin-prettier": "^5.4.0",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "eslint-plugin-storybook": "^0.12.0",
-    "eslint-plugin-unicorn": "^57.0.0",
+    "eslint-plugin-unicorn": "^59.0.1",
     "eslint-plugin-unused-imports": "^4.1.4",
-    "execa": "^9.5.2",
+    "execa": "^9.5.3",
     "fs-extra": "^11.3.0",
     "husky": "^9.1.7",
-    "jasmine-core": "~5.6.0",
+    "jasmine-core": "~5.7.1",
     "jest": "^29.7.0",
-    "jest-preset-angular": "^14.5.4",
+    "jest-preset-angular": "^14.5.5",
     "nano-staged": "^0.8.0",
+    "ngx-schematic-builder": "^0.2.0",
     "prettier": "^3.5.3",
     "prettier-plugin-organize-attributes": "^1.0.0",
-    "rxjs": "~7.8.1",
-    "semantic-release": "^24.2.3",
-    "storybook": "^8.5.5",
-    "stylelint": "^16.17.0",
-    "stylelint-config-standard-scss": "^14.0.0",
-    "typescript": "~5.7.3",
-    "typescript-eslint": "8.29.1"
-  },
-  "eslintConfig": {
-    "extends": [
-      "plugin:storybook/recommended"
-    ]
+    "rxjs": "~7.8.2",
+    "semantic-release": "^24.2.4",
+    "storybook": "^8.6.14",
+    "stylelint": "^16.19.1",
+    "stylelint-config-standard-scss": "^15.0.1",
+    "typescript": "~5.8.3",
+    "typescript-eslint": "8.32.1"
   }
 }

package/src/schematics/components/components-generator.ts

@@ -1,6 +1,6 @@
 import { GeneratorSchemaBase } from '../../types';
 
-export type ComponentType = 'avatar' | 'button' | 'checkbox' | 'input' | 'switch' | 'textarea';
+export type ComponentType = 'avatar' | 'button' | 'checkbox' | 'divider' | 'input' | 'switch' | 'textarea';
 
 export interface ComponentGeneratorSchema extends GeneratorSchemaBase {
   components: ComponentType[];

package/src/schematics/components/files/button/button.component.scss

@@ -2,9 +2,9 @@ $bg-color-hover: #333;
 $bg-color: #000;
 $color: #fff;
 $padding: 8px 24px;
-$shadow-hover: 0 0 0 3px rgb(0 123 255 / 50%);
 $shadow: 0 2px 4px rgb(0 0 0 / 10%);
 $transition-duration: 0.4s;
+$outline: var(--zen-outline, 2px solid hsl(200deg 100 50 / 50%));
 
 :host {
   display: inline-block;
@@ -15,12 +15,13 @@ $transition-duration: 0.4s;
   border: none;
   padding: $padding;
   border-radius: 99999px;
-  transition: all $transition-duration ease;
+  transition-property: background-color, opacity;
+  transition-duration: $transition-duration;
+  transition-timing-function: ease;
   background-color: $bg-color;
   color: $color;
   box-shadow: $shadow;
   text-decoration: none;
-  outline: none;
   overflow: hidden;
   position: relative;
 }
@@ -31,8 +32,8 @@ $transition-duration: 0.4s;
 }
 
 /* Focus state */
-:host:focus {
-  box-shadow: $shadow-hover;
+:host:focus-visible {
+  outline: $outline;
 }
 
 /* Disabled state */

package/src/schematics/components/files/button/button.stories.ts

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/angular';
+
 import { ZenButtonComponent } from './button.component';
 
 export default {

package/src/schematics/components/files/checkbox/checkbox.component.scss

@@ -8,7 +8,7 @@ $appearance: var(--zen-checkbox-appearance, hsl(0% 0% 10%));
 $disabled-opacity: var(--zen-checkbox-disabled-opacity, 0.6);
 $border: var(--zen-checkbox-border, 1px solid hsl(0% 0% 80%));
 $error: var(--zen-error, hsl(0% 70% 50%));
-$outline: var(--zen-outline, 1px solid hsl(0% 0% 60%));
+$outline: var(--zen-outline, 2px solid hsl(200deg 100 50 / 50%));
 
 // Animations
 $transition-duration: var(--zen-transition-duration, 0.2s);

package/src/schematics/components/files/checkbox/checkbox.component.ts

@@ -1,5 +1,5 @@
-import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { booleanAttribute, ChangeDetectionStrategy, Component, forwardRef, input, model } from '@angular/core';
+import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 
 /**
  * ZenCheckboxComponent is a reusable checkbox component designed to provide

package/src/schematics/components/files/checkbox/checkbox.stories.ts

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from '@storybook/angular';
+
 import { ZenCheckboxComponent } from './checkbox.component';
 
 export default {

package/src/schematics/components/files/divider/divider.component.scss

@@ -0,0 +1,52 @@
+$appearance: var(--zen-divider-appearance, hsl(0% 0% 10%));
+$type: var(--zen-divider-type, solid);
+$align-offset: var(--zen-divider-align-offset, 25%);
+$gap: var(--zen-divider-gap, 0.25rem);
+$thickness: var(--zen-divider-thickness, 1px);
+
+:host {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: $gap;
+
+  &::before,
+  &::after {
+    content: '';
+    display: block;
+    width: 100%;
+    height: 0;
+    border-color: $appearance;
+    border-style: $type;
+    border-width: #{$thickness} 0 0;
+  }
+
+  &:not(.has-content)::after {
+    content: none;
+  }
+
+  &.zen-align-start::before,
+  &.zen-align-end::after {
+    width: $align-offset;
+  }
+}
+
+:host[vertical]:not([vertical='false']) {
+  flex-direction: column;
+  width: unset;
+  height: 100%;
+
+  &::before,
+  &::after {
+    content: '';
+    display: block;
+    width: unset;
+    height: 100%;
+    border-width: 0 #{$thickness} 0 0;
+  }
+
+  &.zen-align-start::before,
+  &.zen-align-end::after {
+    height: $align-offset;
+  }
+}

package/src/schematics/components/files/divider/divider.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ZenDividerComponent } from './divider.component';
+
+describe('DividerComponent', () => {
+  let component: ZenDividerComponent;
+  let fixture: ComponentFixture<ZenDividerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ZenDividerComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ZenDividerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/schematics/components/files/divider/divider.component.ts

@@ -0,0 +1,58 @@
+import { ChangeDetectionStrategy, Component, computed, ElementRef, inject, input } from '@angular/core';
+
+/**
+ * ZenDividerComponent is a reusable divider component that provides a simple way to
+ * separate content sections visually. It supports both horizontal (default) and vertical
+ * orientations and can contain optional content.
+ *
+ * The divider automatically detects if it contains content and applies appropriate styling.
+ * Content alignment can be controlled via the `align` input property.
+ *
+ * @example
+ * ```html
+ * <zen-divider/>
+ * <zen-divider>With content</zen-divider>
+ * ```
+ *
+ * ### CSS Custom Properties
+ * You can customize the component using CSS custom properties:
+ *
+ * ```css
+ * :root {
+ *  --zen-divider-appearance: red;
+ *  --zen-divider-type: dotted;
+ *  --zen-divider-align-offset: 10%;
+ * }
+ * ```
+ *
+ * @author Konrad Stępień
+ * @license {@link https://github.com/kstepien3/ng-zen/blob/master/LICENSE|BSD-2-Clause}
+ * @see [GitHub](https://github.com/kstepien3/ng-zen)
+ */
+@Component({
+  selector: `zen-divider, zen-divider[vertical],`,
+  template: '<ng-content/>',
+  styleUrl: './divider.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    '[class.has-content]': 'hasContent()',
+    '[class]': '"zen-align-"+align()',
+  },
+})
+export class ZenDividerComponent {
+  /**
+   * Controls the alignment of content within the divider.
+   * @default 'center'
+   */
+  readonly align = input<'start' | 'end' | 'center'>('center');
+
+  /**
+   * Computed property that determines if the divider contains any content.
+   * Used to apply appropriate styling when content is present.
+   */
+  readonly hasContent = computed(() => {
+    return this.elementRef.nativeElement.childNodes.length > 0;
+  });
+
+  private readonly elementRef = inject(ElementRef);
+}

package/src/schematics/components/files/divider/divider.stories.ts

@@ -0,0 +1,69 @@
+import { Meta, StoryObj } from '@storybook/angular';
+
+import { ZenDividerComponent } from './divider.component';
+
+interface StoryParams {
+  content: string;
+  vertical: boolean;
+}
+
+export default {
+  title: 'Components/Divider',
+  component: ZenDividerComponent,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+  },
+  argTypes: {
+    content: { control: 'text' },
+    vertical: { control: 'boolean' },
+    align: { control: 'select', options: ['start', 'center', 'end'] },
+  },
+  args: { content: '', vertical: false, align: 'center' },
+} satisfies Meta<ZenDividerComponent & StoryParams>;
+
+type Story = StoryObj<ZenDividerComponent & StoryParams>;
+
+export const Default: Story = {
+  render: args => ({
+    props: { ...args },
+    template: `
+    <div style="height: 200px">
+        <zen-divider [align]="'${args.align}'" [attr.vertical]="${args.vertical}">
+          ${args.content ?? ''}
+        </zen-divider>
+    </div>`,
+  }),
+};
+
+export const Vertical: Story = {
+  render: args => ({
+    props: { ...args },
+    template: `
+      <div style="height: 200px; display: flex; justify-content: space-between">
+        <zen-divider vertical align="start">
+          START
+        </zen-divider>
+        <zen-divider vertical>
+          CENTER
+        </zen-divider>
+        <zen-divider vertical align="end">
+          END
+        </zen-divider>
+      </div>`,
+  }),
+};
+
+export const Customization: Story = {
+  render: () => ({
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 1rem">
+        <zen-divider style="--zen-divider-appearance: red;">appearance</zen-divider>
+        <zen-divider style="--zen-divider-type: dotted;">type</zen-divider>
+        <zen-divider style="--zen-divider-align-offset: 10%;" align="start">offset</zen-divider>
+        <zen-divider style="--zen-divider-gap: 50px">gap</zen-divider>
+        <zen-divider style="--zen-divider-thickness: 8px">offset</zen-divider>
+      </div>
+    `,
+  }),
+};

package/src/schematics/components/files/divider/index.ts

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

package/src/schematics/components/files/input/input.component.scss

@@ -6,7 +6,7 @@ $focus-shadow: var(--zen-input-focus-shadow, 0 1px 4px hsla(0% 0% 60% / 20%) ins
 $placeholder-color: var(--zen-input-placeholder-color, hsl(0% 0% 60%));
 
 // Color Palette
-$outline: var(--zen-outline, 1px solid hsl(0% 0% 60%));
+$outline: var(--zen-outline, 2px solid hsl(200deg 100 50 / 50%));
 $error: var(--zen-error, hsl(0% 70% 50%));
 
 input {

package/src/schematics/components/files/input/input.stories.ts

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from '@storybook/angular';
+
 import { ZenInputComponent } from './input.component';
 
 export default {

package/src/schematics/components/files/switch/switch.component.scss

@@ -1,4 +1,4 @@
-$outline: var(--zen-outline, 2px solid hsl(0% 0% 60%));
+$outline: var(--zen-outline, 2px solid hsl(200deg 100 50 / 50%));
 $transition-duration: 0.15s;
 $placeholder-color: var(--zen-input-placeholder-color, hsl(0% 0% 60%));
 $size: var(--zen-switch-size, 16px);
@@ -43,7 +43,7 @@ $height: calc(#{$size} + #{$margin} * 2);
     width: calc(#{$size} + 2px);
   }
 
-  &:focus {
+  &:focus-visible {
     outline: $outline;
   }
 

package/src/schematics/components/files/switch/switch.stories.ts

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from '@storybook/angular';
+
 import { ZenSwitchComponent } from './switch.component';
 
 export default {

package/src/schematics/components/files/textarea/textarea.component.scss

@@ -6,7 +6,7 @@ $focus-shadow: var(--zen-input-focus-shadow, 0 1px 4px hsla(0% 0% 60% / 20%) ins
 $placeholder-color: var(--zen-input-placeholder-color, hsl(0% 0% 60%));
 
 // Color Palette
-$outline: var(--zen-outline, 1px solid hsl(0% 0% 60%));
+$outline: var(--zen-outline, 2px solid hsl(200deg 100 50 / 50%));
 $error: var(--zen-error, hsl(0% 70% 50%));
 
 :host {

package/src/schematics/components/files/textarea/textarea.stories.ts

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from '@storybook/angular';
+
 import { ZenTextareaComponent } from './textarea.component';
 
 interface StoryParams {

package/src/schematics/components/schema.json

@@ -10,7 +10,7 @@
       "type": "array",
       "items": {
         "type": "string",
-        "enum": ["avatar", "button", "checkbox", "input", "switch", "textarea"]
+        "enum": ["avatar", "button", "checkbox", "divider", "input", "switch", "textarea"]
       },
       "multiselect": true,
       "x-prompt": "Which component should be generated?"

package/src/schematics/ng-add/index.ts

@@ -1,14 +1,12 @@
-import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
+import { chain, Rule, schematic, SchematicContext, Tree } from '@angular-devkit/schematics';
 
-import { addPathToTsconfigUtil } from '../../utils';
 import { NgZenGeneratorSchema } from './ng-zen-generator';
 
 export function ngAdd(options: NgZenGeneratorSchema): Rule {
-  return (tree: Tree, _context: SchematicContext) => {
+  return (_tree: Tree, _context: SchematicContext) => {
     _context.logger.info('Adding library to the project');
 
-    addPathToTsconfigUtil(tree, 'ng-zen/*', [`${options.path}/*`]);
-
-    return tree;
+    // Run other schematics from ng-add
+    return chain([schematic('component', options)]);
   };
 }

package/src/schematics/ng-add/ng-zen-generator.ts

@@ -1,3 +1,3 @@
-export interface NgZenGeneratorSchema {
-  path: string;
-}
+import { GeneratorSchemaBase } from '../../types';
+
+export type NgZenGeneratorSchema = GeneratorSchemaBase;

package/src/utils/apply-file-template.util.ts

@@ -1,5 +1,6 @@
 import { normalize, strings } from '@angular-devkit/core';
 import { apply, applyTemplates, chain, filter, mergeWith, move, Rule, url } from '@angular-devkit/schematics';
+
 import { GeneratorSchemaBase } from '../types';
 import { SchematicsFolder } from '../types/schematics-folder.type';
 

package/src/utils/index.ts

@@ -1,2 +1 @@
-export * from './add-path-to-tsconfig.util';
 export * from './apply-file-template.util';

package/projects/schematic-builder/builders/builders.json

@@ -1,9 +0,0 @@
-{
-  "builders": {
-    "build": {
-      "implementation": "./index.js",
-      "schema": "./schema.json",
-      "description": "Custom builder for angular schematics"
-    }
-  }
-}

package/projects/schematic-builder/builders/index.js

@@ -1,100 +0,0 @@
-import { createBuilder } from '@angular-devkit/architect';
-import { execa } from 'execa';
-import cpy from 'cpy';
-import path from 'node:path';
-import fs from 'fs-extra';
-
-const LOG = {
-  log: (logger, level, type, message) => {
-    const timestamp = new Date().toISOString();
-    const output = `[${timestamp}] [${type}] ${message}`;
-
-    // Use the appropriate logger method based on the log level
-    switch (level) {
-      case 'INFO':
-        logger.info(output);
-        break;
-      case 'ERROR':
-        logger.error(output);
-        break;
-      default:
-        logger.log(output);
-    }
-  },
-
-  info: (logger, type, message) => LOG.log(logger, 'INFO', type, message),
-  error: (logger, type, message) => LOG.log(logger, 'ERROR', type, message),
-};
-async function cleanOutputDirectory(outputDir, context) {
-  try {
-    if (await fs.pathExists(outputDir)) {
-      await fs.rm(outputDir, { recursive: true, force: true });
-    }
-    await fs.mkdir(outputDir, { recursive: true });
-  } catch (error) {
-    LOG.error(context.logger, 'ERROR', `Failed to clean output directory: ${error.message}`);
-    context.logger.error();
-    throw error;
-  }
-}
-
-async function getOutputDir(tsConfigPath, workspaceRoot) {
-  const fullPath = path.resolve(workspaceRoot, tsConfigPath);
-  const configContent = await fs.readFile(fullPath, 'utf-8');
-  const config = JSON.parse(configContent);
-
-  const outDir = config.compilerOptions?.outDir || 'dist';
-  const tsConfigDir = path.dirname(fullPath);
-
-  return path.resolve(tsConfigDir, outDir);
-}
-
-async function compileTypeScript(tsConfig, context) {
-  await execa('tsc', ['-p', tsConfig], {
-    stdio: 'inherit',
-    cwd: context.currentDirectory,
-  });
-}
-
-async function copyProjectFiles(files, outputDir, context) {
-  await cpy(files, outputDir, {
-    parents: true,
-    cwd: context.currentDirectory,
-  });
-}
-
-async function cleanPackageJson(outputDir) {
-  const distPackageJson = path.join(outputDir, 'package.json');
-  const pkg = await fs.readJson(distPackageJson);
-  delete pkg.scripts;
-  delete pkg.devDependencies;
-  await fs.writeJson(distPackageJson, pkg, { spaces: 2 });
-}
-
-export default createBuilder(async (options, context) => {
-  try {
-    const outputDir = await getOutputDir(options.tsConfig, context.workspaceRoot);
-    LOG.info(context.logger, 'BUILD', 'Starting build process...');
-
-    LOG.info(context.logger, 'CLEANING', `Cleaning old distribution files in ${outputDir}`);
-    await cleanOutputDirectory(outputDir, context);
-    LOG.info(context.logger, 'CLEANING', `Cleaning completed successfully.`);
-
-    LOG.info(context.logger, 'COMPILING', `Compiling TypeScript files using config: ${options.tsConfig}`);
-    await compileTypeScript(options.tsConfig, context);
-    LOG.info(context.logger, 'COMPILING', 'Compilation completed successfully.');
-
-    LOG.info(context.logger, 'COPYING', `Copying project files to: ${outputDir}`);
-    await copyProjectFiles(options.files, outputDir, context);
-    LOG.info(context.logger, 'COPYING', 'Copy completed successfully.');
-
-    LOG.info(context.logger, 'UPDATING', `Updating package.json file.`);
-    await cleanPackageJson(outputDir);
-    LOG.info(context.logger, 'UPDATING', 'Update completed successfully.');
-
-    return { success: true };
-  } catch (error) {
-    LOG.error(context.logger, 'ERROR', `Build failed: ${error.message}`);
-    return { success: false };
-  }
-});

package/projects/schematic-builder/builders/schema.json

@@ -1,18 +0,0 @@
-{
-  "$schema": "http://json-schema.org/schema",
-  "type": "object",
-  "properties": {
-    "files": {
-      "type": "array",
-      "items": {
-        "type": "string"
-      }
-    },
-    "outputDir": {
-      "type": "string"
-    },
-    "tsConfig": {
-      "type": "string"
-    }
-  }
-}

package/projects/schematic-builder/package.json

@@ -1,11 +0,0 @@
-{
-  "name": "schematic-builder",
-  "version": "1.0.0",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "author": "",
-  "license": "ISC",
-  "description": "",
-  "builders": "./builders/builders.json"
-}

package/src/utils/add-path-to-tsconfig.util.ts

@@ -1,50 +0,0 @@
-import { SchematicsException, Tree } from '@angular-devkit/schematics';
-
-export function addPathToTsconfigUtil(tree: Tree, key: string, value: string[]): void {
-  const tsconfigPath = 'tsconfig.json';
-
-  // Check if tsconfig.json exists
-  if (!tree.exists(tsconfigPath)) {
-    throw new SchematicsException('tsconfig.json does not exist');
-  }
-
-  // Read tsconfig.json content as string
-  const tsconfigBuffer = tree.read(tsconfigPath);
-  if (!tsconfigBuffer) {
-    throw new SchematicsException('Failed to read tsconfig.json');
-  }
-  let tsconfigContent = tsconfigBuffer.toString('utf-8');
-
-  // Extract and preserve the comment
-  const commentMatch = tsconfigContent.match(/\/\*[\s\S]*?\*\//);
-  const comment = commentMatch ? commentMatch[0] : '';
-
-  // Remove comment from content to parse JSON
-  tsconfigContent = tsconfigContent.replace(comment, '');
-
-  // Parse tsconfig.json content
-  let tsconfig;
-  try {
-    tsconfig = JSON.parse(tsconfigContent);
-  } catch (e) {
-    throw new SchematicsException('Failed to parse tsconfig.json' + e);
-  }
-
-  // Modify compilerOptions.paths to add your new mapping
-  if (!tsconfig.compilerOptions) {
-    tsconfig.compilerOptions = {};
-  }
-  if (!tsconfig.compilerOptions.paths) {
-    tsconfig.compilerOptions.paths = {};
-  }
-  tsconfig.compilerOptions.paths[key] = value;
-
-  // Convert tsconfig back to JSON string
-  tsconfigContent = JSON.stringify(tsconfig, null, 2);
-
-  // Ensure the preserved comment is prepended to the JSON string
-  tsconfigContent = `${comment}\n${tsconfigContent}`;
-
-  // Write back to tsconfig.json
-  tree.overwrite(tsconfigPath, tsconfigContent);
-}