@niagads/ui 1.0.1-alpha.0 → 1.1.0-alpha.0

package/dist/niagads-ui.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.10 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
 @import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");
 @layer properties;
 @layer theme, base, components, utilities;
@@ -36,7 +36,6 @@
     --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);
     --color-gray-800: oklch(27.8% 0.033 256.848);
@@ -62,10 +61,11 @@
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
-    --tracking-tight: -0.025em;
     --radius-sm: 0.25rem;
     --radius-md: 0.375rem;
     --radius-lg: 0.5rem;
+    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
     --default-transition-duration: 150ms;
@@ -283,9 +283,6 @@
   .mt-4 {
     margin-top: calc(var(--spacing) * 4);
   }
-  .mt-\[2px\] {
-    margin-top: 2px;
-  }
   .-mr-2 {
     margin-right: calc(var(--spacing) * -2);
   }
@@ -338,9 +335,15 @@
   .h-4 {
     height: calc(var(--spacing) * 4);
   }
+  .h-8 {
+    height: calc(var(--spacing) * 8);
+  }
   .h-10 {
     height: calc(var(--spacing) * 10);
   }
+  .h-12 {
+    height: calc(var(--spacing) * 12);
+  }
   .h-48 {
     height: calc(var(--spacing) * 48);
   }
@@ -350,9 +353,15 @@
   .w-4 {
     width: calc(var(--spacing) * 4);
   }
+  .w-8 {
+    width: calc(var(--spacing) * 8);
+  }
   .w-10 {
     width: calc(var(--spacing) * 10);
   }
+  .w-12 {
+    width: calc(var(--spacing) * 12);
+  }
   .w-24 {
     width: calc(var(--spacing) * 24);
   }
@@ -377,9 +386,6 @@
   .max-w-sm {
     max-width: var(--container-sm);
   }
-  .flex-shrink-0 {
-    flex-shrink: 0;
-  }
   .origin-top-right {
     transform-origin: top right;
   }
@@ -527,13 +533,12 @@
   .text-gray-900 {
     color: var(--color-gray-900);
   }
+  .text-secondary {
+    color: var(--color-secondary);
+  }
   .underline {
     text-decoration-line: underline;
   }
-  .shadow {
-    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px 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);
-  }
   .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);
@@ -791,6 +796,34 @@
   height: calc(var(--spacing) * 4);
   stroke-width: 4;
 }
+.action-button {
+  padding: 0.5rem 1rem;
+  background-color: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--border-radius);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  transition: all var(--transition-fast);
+  font-weight: 500;
+  color: var(--text-primary);
+  white-space: nowrap;
+  text-decoration: none;
+}
+.action-button:hover {
+  background-color: var(--hover-bg);
+  border-color: var(--border-hover);
+  box-shadow: var(--shadow-sm);
+}
+.action-button.primary {
+  background-color: var(--primary-blue);
+  color: var(--text-inverse);
+  border-color: var(--primary-blue);
+}
+.action-button.primary:hover {
+  background-color: var(--secondary-blue);
+}
 .ui-alert {
   margin-bottom: calc(var(--spacing) * 4);
   display: flex;
@@ -869,6 +902,156 @@
     }
   }
 }
+.ui-alert-icon {
+  margin-inline-end: calc(var(--spacing) * 3);
+  margin-top: 2px;
+  display: inline;
+  height: calc(var(--spacing) * 4);
+  width: calc(var(--spacing) * 4);
+  flex-shrink: 0;
+}
+.autocomplete-container {
+  position: relative;
+  width: 100%;
+  max-width: 400px;
+}
+.autocomplete-input-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+.autocomplete-input {
+  width: 100%;
+  padding: 0.75rem 1rem 0.75rem 2.5rem;
+  border: 1px solid var(--gray-700);
+  border-radius: var(--border-radius);
+  background-color: var(--gray-800);
+  color: var(--gray-100);
+  font-size: 0.875rem;
+  transition: all var(--transition-fast);
+}
+.autocomplete-input:focus {
+  border-color: var(--primary-blue);
+  box-shadow: var(--focus-ring);
+}
+.autocomplete-input::placeholder {
+  color: var(--gray-500);
+}
+.search-icon {
+  position: absolute;
+  left: 0.75rem;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--gray-500);
+  width: 16px;
+  height: 16px;
+  pointer-events: none;
+}
+.search-type-hint {
+  position: absolute;
+  right: 0.75rem;
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: none;
+}
+.type-badge {
+  padding: 0.125rem 0.375rem;
+  border-radius: var(--border-radius-sm);
+  font-size: 0.625rem;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+.type-badge.type-gene {
+  background-color: #e0f2fe;
+  color: #0369a1;
+}
+.type-badge.type-variant {
+  background-color: #fef3c7;
+  color: #92400e;
+}
+.type-badge.type-study {
+  background-color: #d1fae5;
+  color: #047857;
+}
+.search-hints {
+  margin-top: 0.5rem;
+  padding: 0.5rem;
+  background-color: var(--gray-50);
+  border-radius: var(--border-radius);
+  border: 1px solid var(--border);
+}
+.search-hint {
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+  margin-bottom: 0.25rem;
+}
+.search-hint:last-child {
+  margin-bottom: 0;
+}
+.autocomplete-suggestions {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  border: 1px solid var(--gray-700);
+  border-top: none;
+  border-radius: 0 0 var(--border-radius) var(--border-radius);
+  box-shadow: var(--shadow-md);
+  z-index: 10;
+  max-height: 300px;
+  overflow-y: auto;
+}
+.autocomplete-suggestion {
+  padding: 0.75rem 1rem;
+  cursor: pointer;
+  transition: background-color var(--transition-fast);
+  color: var(--gray-300);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.suggestion-content {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex: 1;
+}
+.suggestion-text {
+  font-weight: 500;
+}
+.suggestion-type {
+  padding: 0.125rem 0.25rem;
+  border-radius: var(--border-radius-sm);
+  font-size: 0.625rem;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+.suggestion-arrow {
+  color: var(--gray-500);
+  opacity: 0;
+  transition: opacity var(--transition-fast);
+}
+.autocomplete-suggestion:hover .suggestion-arrow, .autocomplete-suggestion.highlighted .suggestion-arrow {
+  opacity: 1;
+}
+.autocomplete-input {
+  background-color: var(--surface);
+  color: var(--text-primary);
+  border-color: var(--border);
+}
+.autocomplete-input:focus {
+  border-color: var(--primary-blue);
+}
+.autocomplete-suggestions {
+  background-color: var(--surface);
+  border-color: var(--border);
+}
+.autocomplete-suggestion {
+  color: var(--text-primary);
+}
+.autocomplete-suggestion:hover, .autocomplete-suggestion.highlighted {
+  background-color: var(--hover-bg);
+}
 .ui-button {
   display: inline-flex;
   cursor: pointer;
@@ -1016,58 +1199,154 @@
     line-height: var(--tw-leading, var(--text-2xl--line-height));
   }
 }
-.ui-card, .ui-card-link {
-  max-width: var(--container-sm);
-  border-style: var(--tw-border-style);
-  border-width: 1px;
-  border-color: var(--color-gray-200);
-  background-color: var(--color-white);
-  padding: calc(var(--spacing) * 6);
+.ui-card {
+  background-color: var(--surface);
+  border-radius: var(--border-radius-lg);
+  box-shadow: var(--shadow);
+  padding: 1.5rem;
+  margin-bottom: 1.5rem;
+  border: 1px solid var(--border);
+  transition: box-shadow var(--transition-fast);
 }
-.ui-card-link {
-  display: block;
-  &:hover {
-    @media (hover: hover) {
-      background-color: var(--color-gray-100);
-    }
-  }
-  @media (prefers-color-scheme: dark) {
-    background-color: var(--color-gray-800);
-  }
+.ui-card:hover {
+  box-shadow: var(--shadow-md);
 }
 .ui-card-header {
-  margin-bottom: calc(var(--spacing) * 2);
-  font-size: var(--text-2xl);
-  line-height: var(--tw-leading, var(--text-2xl--line-height));
-  --tw-font-weight: var(--font-weight-bold);
-  font-weight: var(--font-weight-bold);
-  --tw-tracking: var(--tracking-tight);
-  letter-spacing: var(--tracking-tight);
-  color: var(--color-gray-900);
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 1rem;
+  gap: 1rem;
+  font-size: 1.125rem;
+  font-weight: 600;
 }
-.ui-card-body {
-  margin-bottom: calc(var(--spacing) * 3);
-  --tw-font-weight: var(--font-weight-normal);
-  font-weight: var(--font-weight-normal);
-  color: var(--color-gray-500);
-  @media (prefers-color-scheme: dark) {
-    color: var(--color-gray-400);
+.ui-card-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  line-height: 1.3;
+}
+.ui-card-subtitle {
+  color: var(--text-secondary);
+  margin-top: 0.25rem;
+}
+.ui-card-third {
+  grid-column: span 1;
+}
+.ui-card-half {
+  grid-column: span 1.5;
+}
+.ui-card-two-thirds {
+  grid-column: span 2;
+}
+.ui-card-full {
+  grid-column: span 3;
+}
+@media (max-width: 1024px) {
+  .ui-card-third {
+    grid-column: span 1;
+  }
+  .ui-card-half {
+    grid-column: span 1;
+  }
+  .ui-card-two-thirds {
+    grid-column: span 2;
+  }
+}
+@media (max-width: 768px) {
+  .ui-card-third, .ui-card-half, .ui-card-two-thirds, .ui-card-full {
+    grid-column: span 1;
   }
 }
 .ui-checkbox, .ui-radio {
+  cursor: pointer;
   &.primary {
-    accent-color: var(--color-primary);
+    accent-color: var(--primary);
   }
   &.secondary {
-    accent-color: var(--color-secondary);
+    accent-color: var(--secondary);
   }
   &.accent {
-    accent-color: var(--color-accent);
+    accent-color: var(--secondary);
   }
   &.pink {
     accent-color: var(--color-pink-500);
   }
 }
+.footer {
+  background-color: var(--dark-blue);
+  border-top: 1px solid var(--gray-800);
+  margin-top: auto;
+  color: var(--gray-300);
+  height: var(--footer-height);
+}
+.footer-container {
+  max-width: 1200px;
+  height: 100%;
+  margin: 0 auto;
+  padding: 1.5rem 2rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 2rem;
+}
+.footer-left {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.footer-logo {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.footer-logo-icon {
+  width: 20px;
+  height: 20px;
+  color: var(--accent-teal);
+}
+.footer-logo-text {
+  font-weight: 600;
+  color: var(--gray-100);
+  font-size: 0.875rem;
+}
+.footer-copyright {
+  color: var(--gray-400);
+  font-size: 0.75rem;
+}
+.footer-right {
+  flex-shrink: 0;
+}
+.footer-nav {
+  display: flex;
+  gap: 1.5rem;
+}
+.footer-link {
+  color: var(--gray-400);
+  text-decoration: none;
+  font-size: 0.875rem;
+  transition: color var(--transition-fast);
+}
+.footer-link:hover {
+  color: var(--gray-100);
+}
+@media (max-width: 768px) {
+  .footer-container {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1rem;
+    padding: 1rem;
+  }
+  .footer-nav {
+    gap: 1rem;
+  }
+}
+@media (max-width: 480px) {
+  .footer-nav {
+    flex-wrap: wrap;
+    gap: 0.75rem;
+  }
+}
 .ui-text-input {
   position: relative;
   margin: calc(var(--spacing) * 0);
@@ -1303,6 +1582,63 @@
     padding-inline: calc(var(--spacing) * 3);
   }
 }
+.ui-select {
+  display: block;
+  width: 100%;
+  background-color: var(--color-gray-50);
+  padding: calc(var(--spacing) * 2.5);
+  font-size: var(--text-sm);
+  line-height: var(--tw-leading, var(--text-sm--line-height));
+  color: var(--color-gray-900);
+  &.outline {
+    border-radius: var(--radius-lg);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    --tw-border-style: solid;
+    border-style: solid;
+    border-color: var(--color-gray-300);
+    &:focus {
+      border-color: var(--color-blue-500);
+    }
+    &:focus {
+      --tw-ring-color: var(--color-blue-500);
+    }
+  }
+  &.plain {
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+    background-color: var(--color-white);
+    &:focus {
+      background-color: var(--color-gray-100);
+    }
+  }
+  &.underline {
+    border-top-style: var(--tw-border-style);
+    border-top-width: 0px;
+    border-right-style: var(--tw-border-style);
+    border-right-width: 0px;
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+    border-left-style: var(--tw-border-style);
+    border-left-width: 0px;
+    --tw-border-style: solid;
+    border-style: solid;
+    border-color: var(--color-black);
+    background-color: var(--color-white);
+    &:focus {
+      border-color: var(--color-blue-500);
+    }
+  }
+}
+.ui-select-label {
+  display: block;
+  padding: calc(var(--spacing) * 2);
+  font-size: var(--text-sm);
+  line-height: var(--tw-leading, var(--text-sm--line-height));
+  --tw-font-weight: var(--font-weight-medium);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-gray-900);
+}
 input[type="range"]::-webkit-slider-thumb {
   pointer-events: auto;
   height: calc(var(--spacing) * 5);
@@ -1363,63 +1699,6 @@ input[type="range"] {
     bottom: calc(var(--spacing) * -2);
   }
 }
-.ui-select {
-  display: block;
-  width: 100%;
-  background-color: var(--color-gray-50);
-  padding: calc(var(--spacing) * 2.5);
-  font-size: var(--text-sm);
-  line-height: var(--tw-leading, var(--text-sm--line-height));
-  color: var(--color-gray-900);
-  &.outline {
-    border-radius: var(--radius-lg);
-    border-style: var(--tw-border-style);
-    border-width: 1px;
-    --tw-border-style: solid;
-    border-style: solid;
-    border-color: var(--color-gray-300);
-    &:focus {
-      border-color: var(--color-blue-500);
-    }
-    &:focus {
-      --tw-ring-color: var(--color-blue-500);
-    }
-  }
-  &.plain {
-    border-style: var(--tw-border-style);
-    border-width: 0px;
-    background-color: var(--color-white);
-    &:focus {
-      background-color: var(--color-gray-100);
-    }
-  }
-  &.underline {
-    border-top-style: var(--tw-border-style);
-    border-top-width: 0px;
-    border-right-style: var(--tw-border-style);
-    border-right-width: 0px;
-    border-bottom-style: var(--tw-border-style);
-    border-bottom-width: 1px;
-    border-left-style: var(--tw-border-style);
-    border-left-width: 0px;
-    --tw-border-style: solid;
-    border-style: solid;
-    border-color: var(--color-black);
-    background-color: var(--color-white);
-    &:focus {
-      border-color: var(--color-blue-500);
-    }
-  }
-}
-.ui-select-label {
-  display: block;
-  padding: calc(var(--spacing) * 2);
-  font-size: var(--text-sm);
-  line-height: var(--tw-leading, var(--text-sm--line-height));
-  --tw-font-weight: var(--font-weight-medium);
-  font-weight: var(--font-weight-medium);
-  color: var(--color-gray-900);
-}
 .ui-tabs-container {
   position: relative;
   right: calc(var(--spacing) * 0);
@@ -1587,10 +1866,6 @@ input[type="range"] {
   inherits: false;
   initial-value: solid;
 }
-@property --tw-tracking {
-  syntax: "*";
-  inherits: false;
-}
 @property --tw-leading {
   syntax: "*";
   inherits: false;
@@ -1632,7 +1907,6 @@ input[type="range"] {
       --tw-ring-offset-color: #fff;
       --tw-ring-offset-shadow: 0 0 #0000;
       --tw-outline-style: solid;
-      --tw-tracking: initial;
       --tw-leading: initial;
       --tw-duration: initial;
       --tw-ease: initial;
@@ -1640,4 +1914,44 @@ input[type="range"] {
   }
 }
 
+.tooltip {
+    position: relative;
+    display: inline-flex;
+}
+
+.tooltip-content {
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: var(--gray-800);
+    color: white;
+    padding: 0.5rem 0.75rem;
+    border-radius: var(--border-radius);
+    font-size: 0.75rem;
+    white-space: nowrap;
+    z-index: 50;
+    opacity: 0;
+    visibility: hidden;
+    transition: all var(--transition-fast);
+    pointer-events: none;
+    margin-bottom: 0.5rem;
+}
+
+.tooltip-content::after {
+    content: "";
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border-width: 5px;
+    border-style: solid;
+    border-color: var(--gray-800) transparent transparent transparent;
+}
+
+.tooltip:hover .tooltip-content {
+    opacity: 1;
+    visibility: visible;
+}
+
 /*# sourceMappingURL=niagads-ui.css.map */