@ziadshalaby/ngx-zs-component 2.0.6 → 2.0.8

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);
@@ -411,18 +413,12 @@
   .zs\:m-4 {
     margin: calc(var(--zs-spacing) * 4);
   }
-  .zs\:m-auto {
-    margin: auto;
-  }
   .zs\:mx-4 {
     margin-inline: calc(var(--zs-spacing) * 4);
   }
   .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 +494,9 @@
   .zs\:flex {
     display: flex;
   }
+  .zs\:grid {
+    display: grid;
+  }
   .zs\:hidden {
     display: none;
   }
@@ -616,6 +615,9 @@
   .zs\:min-h-\[90vh\] {
     min-height: 90vh;
   }
+  .zs\:min-h-\[92vh\] {
+    min-height: 92vh;
+  }
   .zs\:w-1 {
     width: calc(var(--zs-spacing) * 1);
   }
@@ -649,9 +651,6 @@
   .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);
   }
@@ -777,6 +776,9 @@
   .zs\:cursor-text {
     cursor: text;
   }
+  .zs\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
   .zs\:flex-col {
     flex-direction: column;
   }
@@ -825,6 +827,9 @@
   .zs\:gap-6 {
     gap: calc(var(--zs-spacing) * 6);
   }
+  .zs\:gap-8 {
+    gap: calc(var(--zs-spacing) * 8);
+  }
   .zs\:truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -1271,6 +1276,12 @@
   .zs\:p-5 {
     padding: calc(var(--zs-spacing) * 5);
   }
+  .zs\:p-6 {
+    padding: calc(var(--zs-spacing) * 6);
+  }
+  .zs\:px-0 {
+    padding-inline: calc(var(--zs-spacing) * 0);
+  }
   .zs\:px-1 {
     padding-inline: calc(var(--zs-spacing) * 1);
   }
@@ -2150,6 +2161,13 @@
       }
     }
   }
+  .zs\:hover\:underline {
+    &:hover {
+      @media (hover: hover) {
+        text-decoration-line: underline;
+      }
+    }
+  }
   .zs\:hover\:opacity-80 {
     &:hover {
       @media (hover: hover) {
@@ -2274,16 +2292,36 @@
       height: calc(var(--zs-spacing) * 10);
     }
   }
+  .zs\:sm\:grid-cols-3 {
+    @media (width >= 40rem) {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
   .zs\:sm\:px-3 {
     @media (width >= 40rem) {
       padding-inline: calc(var(--zs-spacing) * 3);
     }
   }
+  .zs\:sm\:px-4 {
+    @media (width >= 40rem) {
+      padding-inline: calc(var(--zs-spacing) * 4);
+    }
+  }
   .zs\:sm\:px-6 {
     @media (width >= 40rem) {
       padding-inline: calc(var(--zs-spacing) * 6);
     }
   }
+  .zs\:md\:grid-cols-4 {
+    @media (width >= 48rem) {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+  }
+  .zs\:md\:px-8 {
+    @media (width >= 48rem) {
+      padding-inline: calc(var(--zs-spacing) * 8);
+    }
+  }
   .zs\:md\:text-base {
     @media (width >= 48rem) {
       font-size: var(--zs-text-base);
@@ -2305,11 +2343,21 @@
       display: none;
     }
   }
+  .zs\:lg\:grid-cols-5 {
+    @media (width >= 64rem) {
+      grid-template-columns: repeat(5, minmax(0, 1fr));
+    }
+  }
   .zs\:lg\:px-8 {
     @media (width >= 64rem) {
       padding-inline: calc(var(--zs-spacing) * 8);
     }
   }
+  .zs\:lg\:px-12 {
+    @media (width >= 64rem) {
+      padding-inline: calc(var(--zs-spacing) * 12);
+    }
+  }
   .zs\:dark\:border-amber-400 {
     &:where(.dark, .dark *) {
       border-color: var(--zs-color-amber-400);
@@ -2624,6 +2672,11 @@
       background-color: var(--zs-color-gray-900);
     }
   }
+  .zs\:dark\:bg-gray-950 {
+    &:where(.dark, .dark *) {
+      background-color: var(--zs-color-gray-950);
+    }
+  }
   .zs\:dark\:bg-green-400 {
     &:where(.dark, .dark *) {
       background-color: var(--zs-color-green-400);

package/package.json

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