@ziadshalaby/ngx-zs-component 2.0.6 → 2.0.7

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;
   }
@@ -777,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;
   }
@@ -1217,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);
   }
@@ -1325,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);
   }
@@ -1494,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);
   }
@@ -1593,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);
   }
@@ -1815,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) {
@@ -1822,6 +1858,13 @@
       }
     }
   }
+  .zs\:hover\:scale-\[1\.03\] {
+    &:hover {
+      @media (hover: hover) {
+        scale: 1.03;
+      }
+    }
+  }
   .zs\:hover\:border-blue-400 {
     &:hover {
       @media (hover: hover) {
@@ -2247,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;
@@ -2274,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);
@@ -2284,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);
@@ -2305,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);
@@ -2754,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);
@@ -3029,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.6",
+  "version": "2.0.7",
   "peerDependencies": {
     "@angular/common": "^20.3.0",
     "@angular/core": "^20.3.0"