@campxdev/campx-web-utils 2.1.0-alpha.1 → 2.1.0

package/dist/styles.css

@@ -54,6 +54,7 @@
     --color-gray-100: oklch(96.7% 0.003 264.542);
     --color-gray-200: oklch(92.8% 0.006 264.531);
     --color-gray-300: oklch(87.2% 0.01 258.338);
+    --color-gray-400: oklch(70.7% 0.022 261.325);
     --color-gray-500: oklch(55.1% 0.027 264.364);
     --color-gray-600: oklch(44.6% 0.03 256.802);
     --color-gray-700: oklch(37.3% 0.034 259.733);
@@ -724,8 +725,10 @@
     --color-pink-400: oklch(71.8% 0.202 349.761);
     --color-pink-700: oklch(52.5% 0.223 3.958);
     --color-gray-50: oklch(98.5% 0.002 247.839);
+    --color-gray-100: oklch(96.7% 0.003 264.542);
     --color-gray-200: oklch(92.8% 0.006 264.531);
     --color-gray-300: oklch(87.2% 0.01 258.338);
+    --color-gray-400: oklch(70.7% 0.022 261.325);
     --color-gray-500: oklch(55.1% 0.027 264.364);
     --color-gray-600: oklch(44.6% 0.03 256.802);
     --color-gray-700: oklch(37.3% 0.034 259.733);
@@ -1211,9 +1214,6 @@
   .mr-\[10px\] {
     margin-right: 10px;
   }
-  .-mb-px {
-    margin-bottom: -1px;
-  }
   .mb-1 {
     margin-bottom: calc(var(--spacing) * 1);
   }
@@ -1349,6 +1349,10 @@
     width: calc(var(--spacing) * 10);
     height: calc(var(--spacing) * 10);
   }
+  .size-14 {
+    width: calc(var(--spacing) * 14);
+    height: calc(var(--spacing) * 14);
+  }
   .size-auto {
     width: auto;
     height: auto;
@@ -1426,6 +1430,9 @@
   .h-\[2px\] {
     height: 2px;
   }
+  .h-\[18px\] {
+    height: 18px;
+  }
   .h-\[22px\] {
     height: 22px;
   }
@@ -1444,6 +1451,9 @@
   .h-\[250px\] {
     height: 250px;
   }
+  .h-\[calc\(100\%-1px\)\] {
+    height: calc(100% - 1px);
+  }
   .h-\[var\(--radix-select-trigger-height\)\] {
     height: var(--radix-select-trigger-height);
   }
@@ -1480,6 +1490,9 @@
   .max-h-\[310px\] {
     max-height: 310px;
   }
+  .max-h-\[600px\] {
+    max-height: 600px;
+  }
   .min-h-4 {
     min-height: calc(var(--spacing) * 4);
   }
@@ -1594,9 +1607,15 @@
   .w-96 {
     width: calc(var(--spacing) * 96);
   }
+  .w-100 {
+    width: calc(var(--spacing) * 100);
+  }
   .w-\[2px\] {
     width: 2px;
   }
+  .w-\[18px\] {
+    width: 18px;
+  }
   .w-\[22px\] {
     width: 22px;
   }
@@ -1795,12 +1814,18 @@
   .cursor-default {
     cursor: default;
   }
+  .cursor-grab {
+    cursor: grab;
+  }
   .cursor-not-allowed {
     cursor: not-allowed;
   }
   .cursor-pointer {
     cursor: pointer;
   }
+  .touch-none {
+    touch-action: none;
+  }
   .resize {
     resize: both;
   }
@@ -1810,6 +1835,9 @@
   .scroll-py-1 {
     scroll-padding-block: calc(var(--spacing) * 1);
   }
+  .list-inside {
+    list-style-position: inside;
+  }
   .list-disc {
     list-style-type: disc;
   }
@@ -1912,6 +1940,9 @@
   .gap-12 {
     gap: calc(var(--spacing) * 12);
   }
+  .gap-16 {
+    gap: calc(var(--spacing) * 16);
+  }
   .gap-24 {
     gap: calc(var(--spacing) * 24);
   }
@@ -2050,10 +2081,6 @@
   .rounded-xs {
     border-radius: var(--radius-xs);
   }
-  .rounded-t-md {
-    border-top-left-radius: calc(var(--radius) - 2px);
-    border-top-right-radius: calc(var(--radius) - 2px);
-  }
   .rounded-t-xl {
     border-top-left-radius: calc(var(--radius) + 4px);
     border-top-right-radius: calc(var(--radius) + 4px);
@@ -2371,9 +2398,18 @@
   .bg-gray-50 {
     background-color: var(--color-gray-50);
   }
+  .bg-gray-100 {
+    background-color: var(--color-gray-100);
+  }
   .bg-gray-200 {
     background-color: var(--color-gray-200);
   }
+  .bg-gray-300 {
+    background-color: var(--color-gray-300);
+  }
+  .bg-gray-400 {
+    background-color: var(--color-gray-400);
+  }
   .bg-green-50 {
     background-color: var(--color-green-50);
   }
@@ -2470,6 +2506,9 @@
       }
     }
   }
+  .bg-input-background {
+    background-color: var(--input-background);
+  }
   .bg-muted {
     background-color: var(--muted);
   }
@@ -2596,6 +2635,9 @@
   .p-2 {
     padding: calc(var(--spacing) * 2);
   }
+  .p-2\.5 {
+    padding: calc(var(--spacing) * 2.5);
+  }
   .p-3 {
     padding: calc(var(--spacing) * 3);
   }
@@ -2611,6 +2653,9 @@
   .p-8 {
     padding: calc(var(--spacing) * 8);
   }
+  .p-\[3px\] {
+    padding: 3px;
+  }
   .px-\(--cell-size\) {
     padding-inline: var(--cell-size);
   }
@@ -3038,6 +3083,9 @@
   .text-red-500 {
     color: var(--color-red-500);
   }
+  .text-red-600 {
+    color: var(--color-red-600);
+  }
   .text-red-700 {
     color: var(--color-red-700);
   }
@@ -3188,6 +3236,10 @@
   .transition-none {
     transition-property: none;
   }
+  .duration-150 {
+    --tw-duration: 150ms;
+    transition-duration: 150ms;
+  }
   .duration-200 {
     --tw-duration: 200ms;
     transition-duration: 200ms;
@@ -3473,6 +3525,16 @@
       }
     }
   }
+  .hover\:scale-105 {
+    &:hover {
+      @media (hover: hover) {
+        --tw-scale-x: 105%;
+        --tw-scale-y: 105%;
+        --tw-scale-z: 105%;
+        scale: var(--tw-scale-x) var(--tw-scale-y);
+      }
+    }
+  }
   .hover\:cursor-default {
     &:hover {
       @media (hover: hover) {
@@ -3659,6 +3721,19 @@
       }
     }
   }
+  .hover\:bg-muted\/70 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--muted);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: var(--muted);
+          @supports (color: color-mix(in lab, red, red)) {
+            background-color: color-mix(in oklab, var(--muted) 70%, transparent);
+          }
+        }
+      }
+    }
+  }
   .hover\:bg-muted\/80 {
     &:hover {
       @media (hover: hover) {
@@ -3842,6 +3917,14 @@
       }
     }
   }
+  .hover\:shadow-xl {
+    &:hover {
+      @media (hover: hover) {
+        --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px 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);
+      }
+    }
+  }
   .focus\:bg-accent {
     &:focus {
       background-color: var(--accent);
@@ -3917,11 +4000,6 @@
       }
     }
   }
-  .focus-visible\:ring-ring {
-    &:focus-visible {
-      --tw-ring-color: var(--ring);
-    }
-  }
   .focus-visible\:ring-ring\/50 {
     &:focus-visible {
       --tw-ring-color: var(--ring);
@@ -3939,10 +4017,15 @@
       --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
     }
   }
-  .focus-visible\:outline-none {
+  .focus-visible\:outline-1 {
     &:focus-visible {
-      --tw-outline-style: none;
-      outline-style: none;
+      outline-style: var(--tw-outline-style);
+      outline-width: 1px;
+    }
+  }
+  .focus-visible\:outline-ring {
+    &:focus-visible {
+      outline-color: var(--ring);
     }
   }
   .active\:translate-x-0 {
@@ -4254,30 +4337,14 @@
       }
     }
   }
-  .data-\[state\=active\]\:border {
-    &[data-state="active"] {
-      border-style: var(--tw-border-style);
-      border-width: 1px;
-    }
-  }
-  .data-\[state\=active\]\:border-border {
-    &[data-state="active"] {
-      border-color: var(--border);
-    }
-  }
-  .data-\[state\=active\]\:border-b-background {
-    &[data-state="active"] {
-      border-bottom-color: var(--background);
-    }
-  }
-  .data-\[state\=active\]\:bg-background {
+  .data-\[state\=active\]\:bg-muted {
     &[data-state="active"] {
-      background-color: var(--background);
+      background-color: var(--muted);
     }
   }
-  .data-\[state\=active\]\:text-foreground {
+  .data-\[state\=active\]\:text-secondary-foreground {
     &[data-state="active"] {
-      color: var(--foreground);
+      color: var(--secondary-foreground);
     }
   }
   .data-\[state\=checked\]\:translate-x-\[calc\(100\%-2px\)\] {
@@ -4424,9 +4491,14 @@
       display: block;
     }
   }
-  .sm\:w-\[540px\] {
+  .sm\:w-135 {
+    @media (width >= 40rem) {
+      width: calc(var(--spacing) * 135);
+    }
+  }
+  .sm\:w-fit {
     @media (width >= 40rem) {
-      width: 540px;
+      width: fit-content;
     }
   }
   .sm\:max-w-sm {
@@ -4434,6 +4506,11 @@
       max-width: var(--container-sm);
     }
   }
+  .sm\:flex-none {
+    @media (width >= 40rem) {
+      flex: none;
+    }
+  }
   .sm\:grid-cols-2 {
     @media (width >= 40rem) {
       grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -4444,6 +4521,11 @@
       flex-direction: row;
     }
   }
+  .sm\:justify-center {
+    @media (width >= 40rem) {
+      justify-content: center;
+    }
+  }
   .sm\:justify-end {
     @media (width >= 40rem) {
       justify-content: flex-end;
@@ -4464,6 +4546,11 @@
       gap: calc(var(--spacing) * 3);
     }
   }
+  .sm\:px-2 {
+    @media (width >= 40rem) {
+      padding-inline: calc(var(--spacing) * 2);
+    }
+  }
   .sm\:pr-2\.5 {
     @media (width >= 40rem) {
       padding-right: calc(var(--spacing) * 2.5);
@@ -4514,16 +4601,6 @@
       width: auto;
     }
   }
-  .md\:max-w-sm {
-    @media (width >= 48rem) {
-      max-width: var(--container-sm);
-    }
-  }
-  .md\:min-w-0 {
-    @media (width >= 48rem) {
-      min-width: calc(var(--spacing) * 0);
-    }
-  }
   .md\:min-w-\[300px\] {
     @media (width >= 48rem) {
       min-width: 300px;
@@ -4585,6 +4662,11 @@
       display: none;
     }
   }
+  .lg\:grid-cols-2 {
+    @media (width >= 64rem) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
   .lg\:grid-cols-3 {
     @media (width >= 64rem) {
       grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -4971,12 +5053,6 @@
       flex-shrink: 0;
     }
   }
-  .\[\&_svg\:not\(\[class\*\=\"size-\"\]\)\]\:size-4 {
-    & svg:not([class*="size-"]) {
-      width: calc(var(--spacing) * 4);
-      height: calc(var(--spacing) * 4);
-    }
-  }
   .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 {
     & svg:not([class*='size-']) {
       width: calc(var(--spacing) * 4);
@@ -5296,8 +5372,8 @@
   --muted-foreground: oklch(0.556 0 0);
   --accent: oklch(0.97 0 0);
   --accent-foreground: oklch(0.205 0 0);
-  --destructive: #DC2626;
-  --destructive-foreground: #FFFFFF;
+  --destructive: oklch(0.5771 0.2152 27.33);
+  --destructive-foreground: oklch(1 0 0);
   --border: oklch(0.922 0 0);
   --input: oklch(0.922 0 0);
   --ring: oklch(0.708 0 0);
@@ -5314,6 +5390,13 @@
   --highlight-red: oklch(0.576 0.217 23.6);
   --highlight-pink: oklch(0.608 0.186 8.3);
   --highlight-yellow: oklch(0.82 0.166 94.2);
+  --green-background: oklch(0.669 0.102 127.4 / 0.2);
+  --orange-background: oklch(0.707 0.145 55.5 / 0.2);
+  --blue-background: oklch(0.685 0.094 214.9 / 0.2);
+  --red-background: oklch(0.576 0.217 23.6 / 0.2);
+  --pink-background: oklch(0.608 0.186 8.3 / 0.2);
+  --yellow-background: oklch(0.82 0.166 94.2 / 0.2);
+  --input-background: oklch(0.953 0.002 264);
   --font-sans: 'Geist', ui-sans-serif, system-ui, sans-serif;
 }
 .dark {
@@ -5331,8 +5414,8 @@
   --muted-foreground: oklch(0.708 0 0);
   --accent: oklch(0.269 0 0);
   --accent-foreground: oklch(0.985 0 0);
-  --destructive: #DC2626;
-  --destructive-foreground: #FFFFFF;
+  --destructive: oklch(0.5771 0.2152 27.33);
+  --destructive-foreground: oklch(1 0 0);
   --border: oklch(0.269 0 0);
   --input: oklch(0.269 0 0);
   --ring: oklch(0.439 0 0);
@@ -5348,6 +5431,13 @@
   --highlight-red: oklch(0.576 0.217 23.6);
   --highlight-pink: oklch(0.608 0.186 8.3);
   --highlight-yellow: oklch(0.82 0.166 94.2);
+  --green-background: oklch(0.669 0.102 127.4 / 0.2);
+  --orange-background: oklch(0.707 0.145 55.5 / 0.2);
+  --blue-background: oklch(0.685 0.094 214.9 / 0.2);
+  --red-background: oklch(0.576 0.217 23.6 / 0.2);
+  --pink-background: oklch(0.608 0.186 8.3 / 0.2);
+  --yellow-background: oklch(0.82 0.166 94.2 / 0.2);
+  --input-background: oklch(0.215 0.008 264);
   --font-sans: 'Geist', ui-sans-serif, system-ui, sans-serif;
 }
 @layer base {
@@ -6026,6 +6116,21 @@
   initial-value: "";
   inherits: false;
 }
+@property --tw-scale-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-scale-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-scale-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
 @keyframes spin {
   to {
     transform: rotate(360deg);
@@ -6107,6 +6212,9 @@
       --tw-duration: initial;
       --tw-ease: initial;
       --tw-content: "";
+      --tw-scale-x: 1;
+      --tw-scale-y: 1;
+      --tw-scale-z: 1;
     }
   }
 }
@@ -6299,6 +6407,9 @@
       --tw-backdrop-sepia: initial;
       --tw-duration: initial;
       --tw-content: "";
+      --tw-scale-x: 1;
+      --tw-scale-y: 1;
+      --tw-scale-z: 1;
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/campx-web-utils",
-  "version": "2.1.0-alpha.1",
+  "version": "2.1.0",
   "author": "CampX",
   "license": "MIT",
   "keywords": [
@@ -27,7 +27,7 @@
     "react-router-dom": "^6.24.0"
   },
   "dependencies": {
-    "@campxdev/react-blueprint": "3.1.0-alpha.8",
+    "@campxdev/react-blueprint": "3.1.0",
     "@exotel-npm-dev/exotel-ip-calling-crm-websdk": "^1.2.2",
     "@hookform/resolvers": "^2.9.10",
     "axios": "^1.7.2",

package/src/routes/main.tsx

@@ -25,7 +25,7 @@ export const mainRoutes = [
         ]}
         userProfileParams={userProfileParams}
         institutions={[]}
-        currentInstitutionId=""
+        currentInstitutionId={0}
         workspaces={[]}
         currentWorkspaceId=""
         onInstitutionChange={() => {}}