@ziadshalaby/ngx-zs-component 2.0.5 → 2.0.7

package/index.d.ts

@@ -157,7 +157,6 @@ declare class Card {
     readonly cardRef: _angular_core.Signal<ElementRef<any> | undefined>;
     readonly isVisible: _angular_core.WritableSignal<boolean>;
     constructor();
-    readonly visibleClasses: _angular_core.Signal<string>;
     readonly animationClasses: _angular_core.Signal<string>;
     readonly classList: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Card, never>;

package/output.css

@@ -72,6 +72,7 @@
     --zs-color-indigo-400: oklch(67.3% 0.182 276.935);
     --zs-color-indigo-500: oklch(58.5% 0.233 277.117);
     --zs-color-indigo-600: oklch(51.1% 0.262 276.966);
+    --zs-color-violet-100: oklch(94.3% 0.029 294.588);
     --zs-color-violet-200: oklch(89.4% 0.057 293.283);
     --zs-color-violet-300: oklch(81.1% 0.111 293.571);
     --zs-color-violet-400: oklch(70.2% 0.183 293.541);
@@ -79,6 +80,7 @@
     --zs-color-violet-600: oklch(54.1% 0.281 293.009);
     --zs-color-violet-700: oklch(49.1% 0.27 292.581);
     --zs-color-violet-800: oklch(43.2% 0.232 292.759);
+    --zs-color-violet-900: oklch(38% 0.189 293.745);
     --zs-color-purple-400: oklch(71.4% 0.203 305.504);
     --zs-color-purple-600: oklch(55.8% 0.288 302.321);
     --zs-color-fuchsia-400: oklch(74% 0.238 322.16);
@@ -339,6 +341,9 @@
   .zs\:top-1\/6 {
     top: calc(1/6 * 100%);
   }
+  .zs\:top-3 {
+    top: calc(var(--zs-spacing) * 3);
+  }
   .zs\:top-4 {
     top: calc(var(--zs-spacing) * 4);
   }
@@ -357,6 +362,9 @@
   .zs\:bottom-0 {
     bottom: calc(var(--zs-spacing) * 0);
   }
+  .zs\:bottom-3 {
+    bottom: calc(var(--zs-spacing) * 3);
+  }
   .zs\:bottom-4 {
     bottom: calc(var(--zs-spacing) * 4);
   }
@@ -420,9 +428,6 @@
   .zs\:mx-auto {
     margin-inline: auto;
   }
-  .zs\:my-8 {
-    margin-block: calc(var(--zs-spacing) * 8);
-  }
   .zs\:ms-2 {
     margin-inline-start: calc(var(--zs-spacing) * 2);
   }
@@ -498,6 +503,9 @@
   .zs\:flex {
     display: flex;
   }
+  .zs\:grid {
+    display: grid;
+  }
   .zs\:hidden {
     display: none;
   }
@@ -649,12 +657,12 @@
   .zs\:w-50 {
     width: calc(var(--zs-spacing) * 50);
   }
-  .zs\:w-56 {
-    width: calc(var(--zs-spacing) * 56);
-  }
   .zs\:w-64 {
     width: calc(var(--zs-spacing) * 64);
   }
+  .zs\:w-72 {
+    width: calc(var(--zs-spacing) * 72);
+  }
   .zs\:w-auto {
     width: auto;
   }
@@ -703,6 +711,10 @@
     --tw-translate-x: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .zs\:-translate-x-8 {
+    --tw-translate-x: calc(var(--zs-spacing) * -8);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .zs\:-translate-x-24 {
     --tw-translate-x: calc(var(--zs-spacing) * -24);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -715,6 +727,10 @@
     --tw-translate-x: calc(var(--zs-spacing) * 7);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .zs\:translate-x-8 {
+    --tw-translate-x: calc(var(--zs-spacing) * 8);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .zs\:translate-x-9 {
     --tw-translate-x: calc(var(--zs-spacing) * 9);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -727,6 +743,18 @@
     --tw-translate-y: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .zs\:-translate-y-8 {
+    --tw-translate-y: calc(var(--zs-spacing) * -8);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .zs\:translate-y-0 {
+    --tw-translate-y: calc(var(--zs-spacing) * 0);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .zs\:translate-y-8 {
+    --tw-translate-y: calc(var(--zs-spacing) * 8);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .zs\:scale-110 {
     --tw-scale-x: 110%;
     --tw-scale-y: 110%;
@@ -739,6 +767,9 @@
   .zs\:transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
+  .zs\:transform-gpu {
+    transform: translateZ(0) var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
+  }
   .zs\:animate-bounce {
     animation: var(--zs-animate-bounce);
   }
@@ -754,6 +785,9 @@
   .zs\:cursor-text {
     cursor: text;
   }
+  .zs\:grid-cols-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
   .zs\:flex-col {
     flex-direction: column;
   }
@@ -1194,6 +1228,9 @@
   .zs\:bg-transparent {
     background-color: transparent;
   }
+  .zs\:bg-violet-100 {
+    background-color: var(--zs-color-violet-100);
+  }
   .zs\:bg-violet-200 {
     background-color: var(--zs-color-violet-200);
   }
@@ -1302,12 +1339,18 @@
   .zs\:py-6 {
     padding-block: calc(var(--zs-spacing) * 6);
   }
+  .zs\:py-9 {
+    padding-block: calc(var(--zs-spacing) * 9);
+  }
   .zs\:pt-2 {
     padding-top: calc(var(--zs-spacing) * 2);
   }
   .zs\:pt-3 {
     padding-top: calc(var(--zs-spacing) * 3);
   }
+  .zs\:pt-9\.5 {
+    padding-top: calc(var(--zs-spacing) * 9.5);
+  }
   .zs\:pr-2 {
     padding-right: calc(var(--zs-spacing) * 2);
   }
@@ -1471,6 +1514,9 @@
   .zs\:text-gray-600 {
     color: var(--zs-color-gray-600);
   }
+  .zs\:text-gray-700 {
+    color: var(--zs-color-gray-700);
+  }
   .zs\:text-gray-800 {
     color: var(--zs-color-gray-800);
   }
@@ -1570,6 +1616,9 @@
   .zs\:text-violet-600 {
     color: var(--zs-color-violet-600);
   }
+  .zs\:text-violet-700 {
+    color: var(--zs-color-violet-700);
+  }
   .zs\:text-violet-800 {
     color: var(--zs-color-violet-800);
   }
@@ -1603,6 +1652,9 @@
   .zs\:opacity-90 {
     opacity: 90%;
   }
+  .zs\:opacity-100 {
+    opacity: 100%;
+  }
   .zs\:shadow-lg {
     --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1698,6 +1750,9 @@
     --tw-ease: var(--zs-ease-out);
     transition-timing-function: var(--zs-ease-out);
   }
+  .zs\:will-change-transform {
+    will-change: transform;
+  }
   .zs\:select-none {
     -webkit-user-select: none;
     user-select: none;
@@ -1786,6 +1841,16 @@
       --tw-ring-color: var(--zs-color-yellow-400);
     }
   }
+  .zs\:hover\:scale-110 {
+    &:hover {
+      @media (hover: hover) {
+        --tw-scale-x: 110%;
+        --tw-scale-y: 110%;
+        --tw-scale-z: 110%;
+        scale: var(--tw-scale-x) var(--tw-scale-y);
+      }
+    }
+  }
   .zs\:hover\:scale-\[1\.02\] {
     &:hover {
       @media (hover: hover) {
@@ -1793,6 +1858,13 @@
       }
     }
   }
+  .zs\:hover\:scale-\[1\.03\] {
+    &:hover {
+      @media (hover: hover) {
+        scale: 1.03;
+      }
+    }
+  }
   .zs\:hover\:border-blue-400 {
     &:hover {
       @media (hover: hover) {
@@ -2218,6 +2290,14 @@
       --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
     }
   }
+  .zs\:active\:scale-125 {
+    &:active {
+      --tw-scale-x: 125%;
+      --tw-scale-y: 125%;
+      --tw-scale-z: 125%;
+      scale: var(--tw-scale-x) var(--tw-scale-y);
+    }
+  }
   .zs\:active\:scale-\[0\.97\] {
     &:active {
       scale: 0.97;
@@ -2245,6 +2325,16 @@
       height: calc(var(--zs-spacing) * 10);
     }
   }
+  .zs\:sm\:grid-cols-2 {
+    @media (width >= 40rem) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+  .zs\:sm\:gap-6 {
+    @media (width >= 40rem) {
+      gap: calc(var(--zs-spacing) * 6);
+    }
+  }
   .zs\:sm\:px-3 {
     @media (width >= 40rem) {
       padding-inline: calc(var(--zs-spacing) * 3);
@@ -2255,6 +2345,17 @@
       padding-inline: calc(var(--zs-spacing) * 6);
     }
   }
+  .zs\:sm\:text-xl {
+    @media (width >= 40rem) {
+      font-size: var(--zs-text-xl);
+      line-height: var(--tw-leading, var(--zs-text-xl--line-height));
+    }
+  }
+  .zs\:md\:grid-cols-3 {
+    @media (width >= 48rem) {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
   .zs\:md\:text-base {
     @media (width >= 48rem) {
       font-size: var(--zs-text-base);
@@ -2276,11 +2377,21 @@
       display: none;
     }
   }
+  .zs\:lg\:grid-cols-4 {
+    @media (width >= 64rem) {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+  }
   .zs\:lg\:px-8 {
     @media (width >= 64rem) {
       padding-inline: calc(var(--zs-spacing) * 8);
     }
   }
+  .zs\:xl\:grid-cols-5 {
+    @media (width >= 80rem) {
+      grid-template-columns: repeat(5, minmax(0, 1fr));
+    }
+  }
   .zs\:dark\:border-amber-400 {
     &:where(.dark, .dark *) {
       border-color: var(--zs-color-amber-400);
@@ -2725,6 +2836,11 @@
       background-color: var(--zs-color-violet-800);
     }
   }
+  .zs\:dark\:bg-violet-900 {
+    &:where(.dark, .dark *) {
+      background-color: var(--zs-color-violet-900);
+    }
+  }
   .zs\:dark\:bg-yellow-400 {
     &:where(.dark, .dark *) {
       background-color: var(--zs-color-yellow-400);
@@ -3000,6 +3116,11 @@
       color: var(--zs-color-teal-700);
     }
   }
+  .zs\:dark\:text-violet-200 {
+    &:where(.dark, .dark *) {
+      color: var(--zs-color-violet-200);
+    }
+  }
   .zs\:dark\:text-violet-300 {
     &:where(.dark, .dark *) {
       color: var(--zs-color-violet-300);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ziadshalaby/ngx-zs-component",
-  "version": "2.0.5",
+  "version": "2.0.7",
   "peerDependencies": {
     "@angular/common": "^20.3.0",
     "@angular/core": "^20.3.0"