@jacshuo/onyx 1.4.0 → 2.0.0

package/dist/styles.css

@@ -81,6 +81,7 @@
     --container-lg: 32rem;
     --container-xl: 36rem;
     --container-2xl: 42rem;
+    --container-3xl: 48rem;
     --container-4xl: 56rem;
     --container-5xl: 64rem;
     --text-xs: 0.75rem;
@@ -175,6 +176,14 @@
     --color-warning-700: var(--color-orange-700);
     --color-warning-800: var(--color-orange-800);
     --color-warning-900: var(--color-orange-900);
+    --color-chart-1: var(--color-primary-500);
+    --color-chart-2: var(--color-success-500);
+    --color-chart-3: var(--color-warning-500);
+    --color-chart-4: var(--color-danger-500);
+    --color-chart-5: var(--color-secondary-400);
+    --color-chart-6: var(--color-primary-300);
+    --color-chart-7: var(--color-success-300);
+    --color-chart-8: var(--color-warning-300);
     --animate-fade-in: fade-in 150ms ease-out;
     --animate-scale-in: scale-in 200ms ease-out;
     --animate-slide-in-right: slide-in-right 300ms ease-out;
@@ -399,9 +408,6 @@
   .top-1\/2 {
     top: calc(1 / 2 * 100%);
   }
-  .top-2 {
-    top: calc(var(--spacing) * 2);
-  }
   .top-4 {
     top: calc(var(--spacing) * 4);
   }
@@ -420,9 +426,6 @@
   .right-0 {
     right: calc(var(--spacing) * 0);
   }
-  .right-2 {
-    right: calc(var(--spacing) * 2);
-  }
   .right-3 {
     right: calc(var(--spacing) * 3);
   }
@@ -444,9 +447,6 @@
   .bottom-0 {
     bottom: calc(var(--spacing) * 0);
   }
-  .bottom-2 {
-    bottom: calc(var(--spacing) * 2);
-  }
   .bottom-4 {
     bottom: calc(var(--spacing) * 4);
   }
@@ -462,9 +462,6 @@
   .left-1\/2 {
     left: calc(1 / 2 * 100%);
   }
-  .left-2 {
-    left: calc(var(--spacing) * 2);
-  }
   .left-3 {
     left: calc(var(--spacing) * 3);
   }
@@ -588,6 +585,9 @@
   .mr-2 {
     margin-right: calc(var(--spacing) * 2);
   }
+  .mr-4 {
+    margin-right: calc(var(--spacing) * 4);
+  }
   .mb-\(--form-header-mb\) {
     margin-bottom: var(--form-header-mb);
   }
@@ -597,6 +597,9 @@
   .mb-1 {
     margin-bottom: calc(var(--spacing) * 1);
   }
+  .mb-1\.5 {
+    margin-bottom: calc(var(--spacing) * 1.5);
+  }
   .mb-2 {
     margin-bottom: calc(var(--spacing) * 2);
   }
@@ -606,6 +609,9 @@
   .mb-4 {
     margin-bottom: calc(var(--spacing) * 4);
   }
+  .mb-5 {
+    margin-bottom: calc(var(--spacing) * 5);
+  }
   .mb-6 {
     margin-bottom: calc(var(--spacing) * 6);
   }
@@ -780,6 +786,15 @@
   .min-h-50 {
     min-height: calc(var(--spacing) * 50);
   }
+  .min-h-52 {
+    min-height: calc(var(--spacing) * 52);
+  }
+  .min-h-\[2\.5rem\] {
+    min-height: 2.5rem;
+  }
+  .min-h-\[3rem\] {
+    min-height: 3rem;
+  }
   .min-h-\[60px\] {
     min-height: 60px;
   }
@@ -894,6 +909,9 @@
   .max-w-2xl {
     max-width: var(--container-2xl);
   }
+  .max-w-3xl {
+    max-width: var(--container-3xl);
+  }
   .max-w-4xl {
     max-width: var(--container-4xl);
   }
@@ -951,21 +969,18 @@
   .min-w-44 {
     min-width: calc(var(--spacing) * 44);
   }
+  .min-w-\[280px\] {
+    min-width: 280px;
+  }
   .min-w-lg {
     min-width: var(--container-lg);
   }
   .flex-1 {
     flex: 1;
   }
-  .shrink {
-    flex-shrink: 1;
-  }
   .shrink-0 {
     flex-shrink: 0;
   }
-  .grow {
-    flex-grow: 1;
-  }
   .-translate-x-1\/2 {
     --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1125,6 +1140,9 @@
   .appearance-none {
     appearance: none;
   }
+  .grid-cols-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
   .grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -1185,6 +1203,9 @@
   .gap-\(--form-row-gap-sm\) {
     gap: var(--form-row-gap-sm);
   }
+  .gap-0 {
+    gap: calc(var(--spacing) * 0);
+  }
   .gap-0\.5 {
     gap: calc(var(--spacing) * 0.5);
   }
@@ -1399,6 +1420,9 @@
   .rounded-none {
     border-radius: 0;
   }
+  .rounded-sm {
+    border-radius: var(--radius-sm);
+  }
   .rounded-xl {
     border-radius: var(--radius-xl);
   }
@@ -1531,6 +1555,9 @@
   .border-primary-600 {
     border-color: var(--color-primary-600);
   }
+  .border-primary-700 {
+    border-color: var(--color-primary-700);
+  }
   .border-secondary-200 {
     border-color: var(--color-secondary-200);
   }
@@ -1654,6 +1681,9 @@
   .bg-danger-100 {
     background-color: var(--color-danger-100);
   }
+  .bg-danger-400 {
+    background-color: var(--color-danger-400);
+  }
   .bg-danger-500 {
     background-color: var(--color-danger-500);
   }
@@ -1723,6 +1753,9 @@
   .bg-success-100 {
     background-color: var(--color-success-100);
   }
+  .bg-success-400 {
+    background-color: var(--color-success-400);
+  }
   .bg-success-500 {
     background-color: var(--color-success-500);
   }
@@ -1738,6 +1771,9 @@
   .bg-warning-100 {
     background-color: var(--color-warning-100);
   }
+  .bg-warning-400 {
+    background-color: var(--color-warning-400);
+  }
   .bg-warning-500 {
     background-color: var(--color-warning-500);
   }
@@ -1776,6 +1812,10 @@
     }
     background-image: linear-gradient(var(--tw-gradient-stops));
   }
+  .bg-gradient-to-br {
+    --tw-gradient-position: to bottom right in oklab;
+    background-image: linear-gradient(var(--tw-gradient-stops));
+  }
   .from-black\/70 {
     --tw-gradient-from: color-mix(in srgb, #000 70%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1797,6 +1837,10 @@
     }
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
+  .from-primary-500 {
+    --tw-gradient-from: var(--color-primary-500);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
   .via-black\/40 {
     --tw-gradient-via: color-mix(in srgb, #000 40%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1813,6 +1857,10 @@
     --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
     --tw-gradient-stops: var(--tw-gradient-via-stops);
   }
+  .to-primary-700 {
+    --tw-gradient-to: var(--color-primary-700);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
   .to-transparent {
     --tw-gradient-to: transparent;
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -1916,6 +1964,9 @@
   .py-4 {
     padding-block: calc(var(--spacing) * 4);
   }
+  .py-6 {
+    padding-block: calc(var(--spacing) * 6);
+  }
   .py-16 {
     padding-block: calc(var(--spacing) * 16);
   }
@@ -2018,6 +2069,9 @@
   .font-mono {
     font-family: var(--font-mono);
   }
+  .font-sans {
+    font-family: var(--font-sans);
+  }
   .text-2xl {
     font-size: var(--text-2xl);
     line-height: var(--tw-leading, var(--text-2xl--line-height));
@@ -2127,6 +2181,9 @@
   .whitespace-pre {
     white-space: pre;
   }
+  .whitespace-pre-wrap {
+    white-space: pre-wrap;
+  }
   .text-\(--accent\) {
     color: var(--accent);
   }
@@ -2193,9 +2250,18 @@
   .text-green-500 {
     color: var(--color-green-500);
   }
+  .text-primary-50 {
+    color: var(--color-primary-50);
+  }
   .text-primary-100 {
     color: var(--color-primary-100);
   }
+  .text-primary-200 {
+    color: var(--color-primary-200);
+  }
+  .text-primary-300 {
+    color: var(--color-primary-300);
+  }
   .text-primary-400 {
     color: var(--color-primary-400);
   }
@@ -2229,6 +2295,12 @@
   .text-secondary-100 {
     color: var(--color-secondary-100);
   }
+  .text-secondary-200 {
+    color: var(--color-secondary-200);
+  }
+  .text-secondary-300 {
+    color: var(--color-secondary-300);
+  }
   .text-secondary-400 {
     color: var(--color-secondary-400);
   }
@@ -2462,6 +2534,10 @@
     -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
     backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
   }
+  .backdrop-filter {
+    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+  }
   .transition {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -2482,6 +2558,11 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-\[width\,opacity\] {
+    transition-property: width,opacity;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-\[width\] {
     transition-property: width;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -2727,6 +2808,13 @@
       }
     }
   }
+  .hover\:border-primary-300 {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-primary-300);
+      }
+    }
+  }
   .hover\:bg-\(--fe-surface-hover\) {
     &:hover {
       @media (hover: hover) {
@@ -3417,6 +3505,14 @@
       border-color: var(--color-primary-700);
     }
   }
+  .dark\:border-primary-700\/50 {
+    &:where(.dark, .dark *) {
+      border-color: color-mix(in srgb, oklch(37.2% 0.044 257.287) 50%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        border-color: color-mix(in oklab, var(--color-primary-700) 50%, transparent);
+      }
+    }
+  }
   .dark\:border-primary-800 {
     &:where(.dark, .dark *) {
       border-color: var(--color-primary-800);
@@ -3742,6 +3838,11 @@
       color: var(--color-secondary-600);
     }
   }
+  .dark\:text-secondary-700 {
+    &:where(.dark, .dark *) {
+      color: var(--color-secondary-700);
+    }
+  }
   .dark\:text-success-200 {
     &:where(.dark, .dark *) {
       color: var(--color-success-200);
@@ -3787,6 +3888,15 @@
       }
     }
   }
+  .dark\:hover\:border-primary-600 {
+    &:where(.dark, .dark *) {
+      &:hover {
+        @media (hover: hover) {
+          border-color: var(--color-primary-600);
+        }
+      }
+    }
+  }
   .dark\:hover\:bg-danger-900\/20 {
     &:where(.dark, .dark *) {
       &:hover {
@@ -3832,6 +3942,15 @@
       }
     }
   }
+  .dark\:hover\:bg-primary-500 {
+    &:where(.dark, .dark *) {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-primary-500);
+        }
+      }
+    }
+  }
   .dark\:hover\:bg-primary-600 {
     &:where(.dark, .dark *) {
       &:hover {
@@ -3883,6 +4002,18 @@
       }
     }
   }
+  .dark\:hover\:bg-primary-800\/40 {
+    &:where(.dark, .dark *) {
+      &:hover {
+        @media (hover: hover) {
+          background-color: color-mix(in srgb, oklch(27.9% 0.041 260.031) 40%, transparent);
+          @supports (color: color-mix(in lab, red, red)) {
+            background-color: color-mix(in oklab, var(--color-primary-800) 40%, transparent);
+          }
+        }
+      }
+    }
+  }
   .dark\:hover\:bg-primary-800\/50 {
     &:where(.dark, .dark *) {
       &:hover {
@@ -5063,6 +5194,210 @@
   z-index: 20;
   animation: masonry-ripple 0.6s ease-out forwards;
 }
+@keyframes chart-line-draw {
+  from {
+    stroke-dashoffset: 3000;
+  }
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+@keyframes chart-dot-pop {
+  from {
+    r: 0;
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes chart-area-fade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+.chart-line-animate {
+  stroke-dasharray: 3000;
+  stroke-dashoffset: 3000;
+  animation: chart-line-draw 1s ease-out forwards;
+}
+.chart-line-animate:nth-child(2) {
+  animation-delay: 0.1s;
+}
+.chart-line-animate:nth-child(3) {
+  animation-delay: 0.2s;
+}
+.chart-line-animate:nth-child(4) {
+  animation-delay: 0.3s;
+}
+.chart-line-animate:nth-child(5) {
+  animation-delay: 0.4s;
+}
+.chart-area-animate {
+  animation: chart-area-fade 0.8s ease-out forwards;
+  opacity: 0;
+}
+.chart-dot-animate {
+  animation: chart-dot-pop 0.4s ease-out forwards;
+  animation-delay: 0.8s;
+  opacity: 0;
+}
+circle.chart-dot {
+  transition: r 0.15s ease, filter 0.15s ease;
+  cursor: crosshair;
+}
+circle.chart-dot:hover, circle.chart-dot.chart-dot--active {
+  filter: drop-shadow(0 0 4px currentColor);
+}
+.chart-crosshair {
+  pointer-events: none;
+  transition: opacity 0.1s ease;
+}
+@keyframes chart-bar-rise {
+  from {
+    clip-path: inset(100% 0 0 0);
+    opacity: 0.5;
+  }
+  to {
+    clip-path: inset(0% 0 0 0);
+    opacity: 1;
+  }
+}
+@keyframes chart-bar-extend {
+  from {
+    clip-path: inset(0 100% 0 0);
+    opacity: 0.5;
+  }
+  to {
+    clip-path: inset(0 0% 0 0);
+    opacity: 1;
+  }
+}
+.chart-bar-v {
+  transition: filter 0.18s ease;
+}
+.chart-bar-v.chart-bar-animate {
+  animation: chart-bar-rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+.chart-bar-h {
+  transition: filter 0.18s ease;
+}
+.chart-bar-h.chart-bar-animate {
+  animation: chart-bar-extend 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+.chart-bar-v:hover, .chart-bar-h:hover {
+  filter: brightness(1.18);
+  cursor: pointer;
+}
+.chart-bar-hidden {
+  opacity: 0;
+  pointer-events: none;
+}
+@keyframes chart-pie-scale-in {
+  from {
+    transform: scale(0);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+@keyframes chart-pie-slice-appear {
+  from {
+    opacity: 0;
+    transform: scale(0.7);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+.chart-pie-animate {
+  transform-origin: center;
+  animation: chart-pie-scale-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+}
+.chart-slice {
+  transform-origin: center;
+  transition: transform 0.2s ease, filter 0.15s ease;
+  cursor: pointer;
+}
+.chart-slice-animate-0 {
+  animation: chart-pie-slice-appear 0.4s ease-out 0.0s both;
+}
+.chart-slice-animate-1 {
+  animation: chart-pie-slice-appear 0.4s ease-out 0.06s both;
+}
+.chart-slice-animate-2 {
+  animation: chart-pie-slice-appear 0.4s ease-out 0.12s both;
+}
+.chart-slice-animate-3 {
+  animation: chart-pie-slice-appear 0.4s ease-out 0.18s both;
+}
+.chart-slice-animate-4 {
+  animation: chart-pie-slice-appear 0.4s ease-out 0.24s both;
+}
+.chart-slice-animate-5 {
+  animation: chart-pie-slice-appear 0.4s ease-out 0.30s both;
+}
+.chart-slice-animate-6 {
+  animation: chart-pie-slice-appear 0.4s ease-out 0.36s both;
+}
+.chart-slice-animate-7 {
+  animation: chart-pie-slice-appear 0.4s ease-out 0.42s both;
+}
+.chart-slice--exploded {
+  filter: brightness(1.12) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25));
+}
+.chart-slice--hidden {
+  opacity: 0.12;
+  pointer-events: none;
+}
+@keyframes chart-dot-fade-in {
+  from {
+    opacity: 0;
+    transform: scale(0);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+.chart-scatter-dot {
+  transition: r 0.15s ease, filter 0.15s ease;
+  cursor: crosshair;
+}
+.chart-scatter-dot.chart-scatter-dot--animate {
+  animation: chart-dot-fade-in 0.35s ease-out forwards;
+  opacity: 0;
+}
+.chart-scatter-group:nth-child(1) .chart-scatter-dot {
+  animation-delay: 0.05s;
+}
+.chart-scatter-group:nth-child(2) .chart-scatter-dot {
+  animation-delay: 0.15s;
+}
+.chart-scatter-group:nth-child(3) .chart-scatter-dot {
+  animation-delay: 0.25s;
+}
+.chart-scatter-group:nth-child(4) .chart-scatter-dot {
+  animation-delay: 0.35s;
+}
+.chart-scatter-dot:hover {
+  filter: drop-shadow(0 0 5px currentColor);
+}
+.chart-cluster-ellipse {
+  pointer-events: none;
+  animation: chart-dot-fade-in 0.4s ease-out forwards;
+  opacity: 0;
+}
+.chart-scatter-link {
+  pointer-events: none;
+  opacity: 0.4;
+}
 @layer base {
   @media (hover: none) and (pointer: coarse) {
     input,