@ng-zen/cli 19.3.0-next.1 → 19.3.0

package/CHANGELOG.md

@@ -1,3 +1,26 @@
+## [19.3.0](https://github.com/kstepien3/ng-zen/compare/v19.2.0...v19.3.0) (2025-06-12)
+
+### 🚀 New Features
+
+* **skeleton:** add component ([#205](https://github.com/kstepien3/ng-zen/issues/205)) ([fa21c9a](https://github.com/kstepien3/ng-zen/commit/fa21c9a440ce918d521c12cd9e9eec17cade60cd))
+
+### 🐛 Bug Fixes
+
+* **storybook/components:** format and documentation ([#211](https://github.com/kstepien3/ng-zen/issues/211)) ([a0fb6f5](https://github.com/kstepien3/ng-zen/commit/a0fb6f576e1c47509ba2aed4cd4314dace894366))
+* **styles:** improve format of hls colors ([#207](https://github.com/kstepien3/ng-zen/issues/207)) ([354d698](https://github.com/kstepien3/ng-zen/commit/354d6989507ba86397268012f6a53002c2e02297))
+
+## [19.3.0-next.2](https://github.com/kstepien3/ng-zen/compare/v19.3.0-next.1...v19.3.0-next.2) (2025-06-11)
+
+### 🐛 Bug Fixes
+
+* **storybook/components:** format and documentation ([#211](https://github.com/kstepien3/ng-zen/issues/211)) ([a0fb6f5](https://github.com/kstepien3/ng-zen/commit/a0fb6f576e1c47509ba2aed4cd4314dace894366))
+* **styles:** improve format of hls colors ([#207](https://github.com/kstepien3/ng-zen/issues/207)) ([354d698](https://github.com/kstepien3/ng-zen/commit/354d6989507ba86397268012f6a53002c2e02297))
+
+### 📚 Documentation
+
+* **DEVELOPMENT:** add release information ([#209](https://github.com/kstepien3/ng-zen/issues/209)) ([f9aad1b](https://github.com/kstepien3/ng-zen/commit/f9aad1b8be3d7d633c41ad9cff4bf3c6b93ad0f4))
+* resolve a problem with missing documentation ([#208](https://github.com/kstepien3/ng-zen/issues/208)) ([85e7969](https://github.com/kstepien3/ng-zen/commit/85e7969c23b6b7bd2039e9cfdc336dc8da6edcc1))
+
 ## [19.3.0-next.1](https://github.com/kstepien3/ng-zen/compare/v19.2.0...v19.3.0-next.1) (2025-06-10)
 
 ### 🚀 New Features

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-zen/cli",
-  "version": "19.3.0-next.1",
+  "version": "19.3.0",
   "description": "A CLI tool for generating customizable, modern Angular UI components using schematics.",
   "license": "BSD-2-Clause",
   "private": false,

package/schematics/components/files/avatar/avatar.component.scss

@@ -1,6 +1,6 @@
-$size: var(--zen-avatar-size, 32px);
-$bg-color: var(--zen-avatar-bg-color, #d3d3d3);
-$color: var(--zen-avatar-color, #0f172a);
+$size: var(--zen-avatar-size, 2rem);
+$bg-color: var(--zen-avatar-bg-color, hsl(0deg 0% 80%));
+$color: var(--zen-avatar-color, hsl(0deg 0% 20%));
 $font-size: var(--zen-avatar-font-size, small);
 
 :host {

package/schematics/components/files/avatar/avatar.component.ts

@@ -8,9 +8,7 @@ import { ChangeDetectionStrategy, Component, input } from '@angular/core';
  *
  * This component utilizes Angular's optimized image directives for enhanced performance.
  *
- * ### Usage
- *
- * To use the component, you can provide an image source or project content:
+ * @example
  *
  * ```html
  * <!-- If an image source is provided, it will display the image -->
@@ -22,20 +20,17 @@ import { ChangeDetectionStrategy, Component, input } from '@angular/core';
  *
  * ### CSS Custom Properties
  *
- * You can customize the avatar using CSS custom properties:
+ * You can customize the component using CSS custom properties:
  *
  * ```css
  * :root {
- *  --zen-avatar-size: 16px;
- *  --zen-avatar-bg-color: black;
- *  --zen-avatar-color: white;
+ *  --zen-avatar-size: 2rem;
+ *  --zen-avatar-bg-color: hsl(0deg 0% 80%);
+ *  --zen-avatar-color: hsl(0deg 0% 20%);
  *  --zen-avatar-font-size: small;
  * }
  * ```
  *
- * @example
- * <zen-avatar src="https://picsum.photos/32" />
- *
  * @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)

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

@@ -4,7 +4,7 @@ $color: var(--zen-button-color, hsl(0deg 0% 100%));
 $padding: var(--zen-button-padding, 0.5rem 1rem);
 $shadow: var(--zen-button-shadow, 0 2px 4px hsl(0deg 0% 0% / 10%));
 $transition-duration: var(--zen-transition-duration, 0.4s);
-$outline: var(--zen-outline, 2px solid hsl(200deg 100 50 / 50%));
+$outline: var(--zen-outline, 2px solid hsl(200deg 100% 50% / 50%));
 
 :host {
   display: inline-block;

package/schematics/components/files/button/button.component.ts

@@ -9,6 +9,20 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
  * @example
  * <button zen-btn> ... </button>
  *
+ * ### CSS Custom Properties
+ *
+ * You can customize the component using CSS custom properties:
+ *
+ * ```css
+ * :root {
+ *   --zen-button-bg-color-hover: lightgrey;
+ *   --zen-button-bg-color: grey;
+ *   --zen-button-color: white;
+ *   --zen-button-padding: 0.5rem 2rem;
+ *   --zen-button-shadow: 0 2px 4px hsl(0deg 0% 0% / 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)

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

@@ -1,14 +1,14 @@
 // Component Variables
 $size: var(--zen-checkbox-size, 16px);
 $border-radius: var(--zen-checkbox-border-radius, 6px);
-$focus-shadow: var(--zen-checkbox-focus-shadow, 0 1px 4px hsla(0% 0% 60% / 20%) inset);
+$focus-shadow: var(--zen-checkbox-focus-shadow, 0 1px 4px hsl(0deg 0% 60% / 20%) inset);
 
 // Color Palette
-$appearance: var(--zen-checkbox-appearance, hsl(0% 0% 10%));
+$appearance: var(--zen-checkbox-appearance, hsl(0deg 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, 2px solid hsl(200deg 100 50 / 50%));
+$border: var(--zen-checkbox-border, 1px solid hsl(0deg 0% 80%));
+$error: var(--zen-error, hsl(0deg 70% 50%));
+$outline: var(--zen-outline, 2px solid hsl(200deg 100% 50% / 50%));
 
 // Animations
 $transition-duration: var(--zen-transition-duration, 0.2s);
@@ -51,12 +51,12 @@ input {
 }
 
 :host:has(input[type='checkbox']:disabled) {
+  opacity: $disabled-opacity;
+
   &,
   input {
     cursor: not-allowed;
   }
-
-  opacity: $disabled-opacity;
 }
 
 :host:has(input:focus-visible) {

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

@@ -10,6 +10,21 @@ import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/f
  * @example
  * <zen-checkbox value="false" />
  *
+ * ### CSS Custom Properties
+ *
+ * You can customize the component using CSS custom properties:
+ *
+ * ```css
+ * :root {
+ *  --zen-checkbox-size: 16px;
+ *  --zen-checkbox-border-radius: 6px;
+ *  --zen-checkbox-focus-shadow: 0 1px 4px hsl(0deg 0% 60% / 20%) inset;
+ *  --zen-checkbox-appearance: hsl(0deg 0% 10%);
+ *  --zen-checkbox-disabled-opacity: 0.6;
+ *  --zen-checkbox-border: 1px solid hsl(0deg 0% 80%);
+ * }
+ * ```
+ *
  * @implements {ControlValueAccessor}
  *
  * @author Konrad Stępień

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

@@ -1,4 +1,4 @@
-$appearance: var(--zen-divider-appearance, hsl(0% 0% 10%));
+$appearance: var(--zen-divider-appearance, hsl(0deg 0% 60%));
 $type: var(--zen-divider-type, solid);
 $align-offset: var(--zen-divider-align-offset, 25%);
 $gap: var(--zen-divider-gap, 0.25rem);
@@ -9,6 +9,7 @@ $thickness: var(--zen-divider-thickness, 1px);
   display: flex;
   align-items: center;
   gap: $gap;
+  color: $appearance;
 
   &::before,
   &::after {
@@ -21,8 +22,12 @@ $thickness: var(--zen-divider-thickness, 1px);
     border-width: #{$thickness} 0 0;
   }
 
-  &:not(.has-content)::after {
-    content: none;
+  &:not(.has-content) {
+    gap: 0;
+
+    &::after {
+      content: none;
+    }
   }
 
   &.zen-align-start::before,

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

@@ -19,9 +19,11 @@ import { ChangeDetectionStrategy, Component, computed, ElementRef, inject, input
  *
  * ```css
  * :root {
- *  --zen-divider-appearance: red;
- *  --zen-divider-type: dotted;
- *  --zen-divider-align-offset: 10%;
+ *  --zen-divider-appearance: hsl(0deg 0% 10%);
+ *  --zen-divider-type: solid;
+ *  --zen-divider-align-offset: 25%;
+ *  --zen-divider-gap: 0.25rem;
+ *  --zen-divider-thickness: 1px;
  * }
  * ```
  *

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

@@ -1,13 +1,13 @@
 // Component Variables
-$border: var(--zen-input-border, 1px solid hsl(0% 0% 80%));
+$border: var(--zen-input-border, 1px solid hsl(0deg 0% 80%));
 $border-radius: var(--zen-input-border-radius, 8px);
 $padding: var(--zen-input-padding, 0.5rem 1rem);
-$focus-shadow: var(--zen-input-focus-shadow, 0 1px 4px hsla(0% 0% 60% / 20%) inset);
-$placeholder-color: var(--zen-input-placeholder-color, hsl(0% 0% 60%));
+$focus-shadow: var(--zen-input-focus-shadow, 0 1px 4px hsl(0deg 0% 60% / 20%) inset);
+$placeholder-color: var(--zen-input-placeholder-color, hsl(0deg 0% 60%));
 
 // Color Palette
-$outline: var(--zen-outline, 2px solid hsl(200deg 100 50 / 50%));
-$error: var(--zen-error, hsl(0% 70% 50%));
+$outline: var(--zen-outline, 2px solid hsl(200deg 100% 50% / 50%));
+$error: var(--zen-error, hsl(0deg 70% 50%));
 
 input {
   border: $border;

package/schematics/components/files/input/input.component.ts

@@ -9,6 +9,19 @@ import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/f
  * @example
  * <zen-input value="string" />
  *
+ * ### CSS Custom Properties
+ * You can customize the component using CSS custom properties:
+ *
+ * ```css
+ * :root {
+ *  --zen-input-border: 1px solid hsl(0deg 0% 80%);
+ *  --zen-input-border-radius: 8px;
+ *  --zen-input-padding: 0.5rem 1rem;
+ *  --zen-input-focus-shadow: 0 1px 4px hsl(0deg 0% 60% / 20%) inset;
+ *  --zen-input-placeholder-color: hsl(0deg 0% 60%);
+ * }
+ * ```
+ *
  * @implements {ControlValueAccessor}
  *
  * @author Konrad Stępień

package/schematics/components/files/skeleton/skeleton.component.ts

@@ -4,24 +4,29 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
  * ZenInputComponent loader component that displays loading states.
  *
  * @example
- * ```HTML
- * <zen-skeleton rounded/>
+ *
+ * ```html
+ * <zen-skeleton rounded />
  * ```
+ *
  * ### Properties:
  * - `rounded` - Whether to display rounded corners
  *
  * ### CSS Custom Properties
  * You can customize the component using CSS custom properties:
  *
- * ```CSS
+ * ```css
  * :root {
- *  --zen-skeleton-background: red;
- *  --zen-skeleton-border-radius: 1rem;
- *  --zen-skeleton-animation-duration: 1s;
+ *  --zen-skeleton-background: hsl(0deg 0% 80%);
+ *  --zen-skeleton-border-radius: 0.5rem;
+ *  --zen-skeleton-animation-duration: 1.6s;
  * }
  * ```
+ *
+ * @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-skeleton, zen-skeleton[rounded]',
   template: ``,

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

@@ -1,6 +1,6 @@
-$outline: var(--zen-outline, 2px solid hsl(200deg 100 50 / 50%));
+$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%));
+$placeholder-color: var(--zen-input-placeholder-color, hsl(0deg 0% 60%));
 $size: var(--zen-switch-size, 16px);
 $margin: var(--zen-switch-margin, 2px);
 $width: var(--zen-switch-width, 30px);
@@ -9,7 +9,7 @@ $height: calc(#{$size} + #{$margin} * 2);
 
 :host {
   cursor: pointer;
-  background: hsl(0% 0% 80%);
+  background: hsl(0deg 0% 80%);
   border-radius: 9999px;
   width: $width;
   height: $height;
@@ -48,10 +48,10 @@ $height: calc(#{$size} + #{$margin} * 2);
   }
 
   &[data-checked='true'] {
-    background-color: hsl(0% 0% 10%);
+    background-color: hsl(0deg 0% 10%);
 
     .switch-handle {
-      color: hsl(0% 0% 10%);
+      color: hsl(0deg 0% 10%);
       right: 0;
     }
   }

package/schematics/components/files/switch/switch.component.ts

@@ -1,6 +1,36 @@
 import { ChangeDetectionStrategy, Component, forwardRef, model } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
+/**
+ * ZenInputComponent is a reusable text input component designed to provide
+ * a consistent and customizable input style across the application.
+ * It supports Angular forms integration and provides two-way data binding.
+ *
+ * @example
+ *
+ * ```html
+ * <zen-switch [disabled]="false" [value]="true" />
+ *```
+ *
+ * ### CSS Custom Properties
+ * You can customize the component using CSS custom properties:
+ *
+ * ```css
+ * :root {
+ *  --zen-input-border: 1px solid hsl(0deg 0% 80%);
+ *  --zen-input-border-radius: 8px;
+ *  --zen-input-padding: 0.5rem 1rem;
+ *  --zen-input-focus-shadow: 0 1px 4px hsl(0deg 0% 60% / 20%) inset;
+ *  --zen-input-placeholder-color: hsl(0deg 0% 60%);
+ * }
+ * ```
+ *
+ * @implements {ControlValueAccessor}
+ *
+ * @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-switch',
   template: `

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

@@ -1,13 +1,13 @@
 // Component Variables
-$border: var(--zen-input-border, 1px solid hsl(0% 0% 80%));
+$border: var(--zen-input-border, 1px solid hsl(0deg 0% 80%));
 $border-radius: var(--zen-input-border-radius, 8px);
 $padding: var(--zen-input-padding, 0.5rem 1rem);
-$focus-shadow: var(--zen-input-focus-shadow, 0 1px 4px hsla(0% 0% 60% / 20%) inset);
-$placeholder-color: var(--zen-input-placeholder-color, hsl(0% 0% 60%));
+$focus-shadow: var(--zen-input-focus-shadow, 0 1px 4px hsl(0deg 0% 60% / 20%) inset);
+$placeholder-color: var(--zen-input-placeholder-color, hsl(0deg 0% 60%));
 
 // Color Palette
-$outline: var(--zen-outline, 2px solid hsl(200deg 100 50 / 50%));
-$error: var(--zen-error, hsl(0% 70% 50%));
+$outline: var(--zen-outline, 2px solid hsl(200deg 100% 50% / 50%));
+$error: var(--zen-error, hsl(0deg 70% 50%));
 
 :host {
   border: $border;

package/schematics/components/files/textarea/textarea.component.ts

@@ -8,6 +8,19 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
  * @example
  * <textarea zen-textarea></textarea>
  *
+ * ### CSS Custom Properties
+ * You can customize the component using CSS custom properties:
+ *
+ * ```css
+ * :root {
+ *  --zen-input-border: 1px solid hsl(0deg 0% 80%);
+ *  --zen-input-border-radius: 8px;
+ *  --zen-input-padding: 0.5rem 1rem;
+ *  --zen-input-focus-shadow: 0 1px 4px hsl(0deg 0% 60% / 20%) inset;
+ *  --zen-input-placeholder-color: hsl(0deg 0% 60%);
+ * }
+ * ```
+ *
  * @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)