@jacshuo/onyx 1.4.0 → 2.0.0

package/dist/styles/Chart/BarChart.css

@@ -0,0 +1,44 @@
+/* BarChart animations */
+
+/* Vertical: reveal from bottom upward using clip-path */
+@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;   }
+}
+
+/* Horizontal: reveal from left rightward using clip-path */
+@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;   }
+}
+
+/* Vertical bars */
+.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;
+}
+
+/* Horizontal bars */
+.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;
+}
+
+/* Hover — pure filter, never touches animation */
+.chart-bar-v:hover,
+.chart-bar-h:hover {
+  filter: brightness(1.18);
+  cursor: pointer;
+}
+
+/* Hidden series bars */
+.chart-bar-hidden {
+  opacity: 0;
+  pointer-events: none;
+}

package/dist/styles/Chart/LineChart.css

@@ -0,0 +1,72 @@
+/* LineChart animations */
+
+@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;
+  }
+}
+
+/* Draw animation applied to line paths and polylines */
+.chart-line-animate {
+  stroke-dasharray: 3000;
+  stroke-dashoffset: 3000;
+  animation: chart-line-draw 1s ease-out forwards;
+}
+
+/* Stagger each series */
+.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; }
+
+/* Area fill entrance */
+.chart-area-animate {
+  animation: chart-area-fade 0.8s ease-out forwards;
+  opacity: 0;
+}
+
+/* Dot entrance animation */
+.chart-dot-animate {
+  animation: chart-dot-pop 0.4s ease-out forwards;
+  animation-delay: 0.8s;
+  opacity: 0;
+}
+
+/* Dot hover glow */
+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);
+}
+
+/* Crosshair */
+.chart-crosshair {
+  pointer-events: none;
+  transition: opacity 0.1s ease;
+}

package/dist/styles/Chart/PieChart.css

@@ -0,0 +1,56 @@
+/* PieChart animations */
+
+@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);
+  }
+}
+
+/* Animate entire pie container */
+.chart-pie-animate {
+  transform-origin: center;
+  animation: chart-pie-scale-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+}
+
+/* Each slice entrance with stagger */
+.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; }
+
+/* Explosion */
+.chart-slice--exploded {
+  filter: brightness(1.12) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25));
+}
+
+/* Fade out hidden slices */
+.chart-slice--hidden {
+  opacity: 0.12;
+  pointer-events: none;
+}

package/dist/styles/Chart/ScatterChart.css

@@ -0,0 +1,45 @@
+/* ScatterChart animations */
+
+@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;
+}
+
+/* Stagger dots by series */
+.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);
+}
+
+/* Cluster ellipse */
+.chart-cluster-ellipse {
+  pointer-events: none;
+  animation: chart-dot-fade-in 0.4s ease-out forwards;
+  opacity: 0;
+}
+
+/* Linked line */
+.chart-scatter-link {
+  pointer-events: none;
+  opacity: 0.4;
+}

package/dist/styles/Extras/TypewriterText.css

@@ -0,0 +1,55 @@
+/* TypewriterText.css — cursor animations */
+
+/* ── Block cursor blink ────────────────────────────────── */
+@keyframes tw-blink {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+}
+
+/* ── Gentle fade-out on completion ───────────────────────── */
+@keyframes tw-cursor-out {
+  0% {
+    opacity: 1;
+  }
+  80% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+/* ── Base cursor element ─────────────────────────────────── */
+.tw-cursor {
+  display: inline-block;
+  line-height: 1;
+  vertical-align: baseline;
+  user-select: none;
+  /* Slightly squish to look more like a text-insertion caret */
+  transform: scaleY(0.88);
+  transform-origin: 50% 90%;
+  /* Inherit the parent's color by default — adapts to any theme */
+  color: currentColor;
+}
+
+/* Thinking / waiting — slow, step-style blink */
+.tw-cursor--blink {
+  animation: tw-blink 1s step-end infinite;
+}
+
+/* Actively typing — solid, no blink */
+.tw-cursor--solid {
+  opacity: 1;
+  animation: none;
+}
+
+/* Done — fade away */
+.tw-cursor--out {
+  animation: tw-cursor-out 0.6s ease-out forwards;
+  pointer-events: none;
+}

package/dist/styles/base.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;
@@ -397,9 +406,6 @@
   .top-1\/2 {
     top: calc(1 / 2 * 100%);
   }
-  .top-2 {
-    top: calc(var(--spacing) * 2);
-  }
   .top-4 {
     top: calc(var(--spacing) * 4);
   }
@@ -418,9 +424,6 @@
   .right-0 {
     right: calc(var(--spacing) * 0);
   }
-  .right-2 {
-    right: calc(var(--spacing) * 2);
-  }
   .right-3 {
     right: calc(var(--spacing) * 3);
   }
@@ -442,9 +445,6 @@
   .bottom-0 {
     bottom: calc(var(--spacing) * 0);
   }
-  .bottom-2 {
-    bottom: calc(var(--spacing) * 2);
-  }
   .bottom-4 {
     bottom: calc(var(--spacing) * 4);
   }
@@ -460,9 +460,6 @@
   .left-1\/2 {
     left: calc(1 / 2 * 100%);
   }
-  .left-2 {
-    left: calc(var(--spacing) * 2);
-  }
   .left-3 {
     left: calc(var(--spacing) * 3);
   }
@@ -586,6 +583,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);
   }
@@ -595,6 +595,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);
   }
@@ -604,6 +607,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);
   }
@@ -778,6 +784,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;
   }
@@ -892,6 +907,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);
   }
@@ -949,21 +967,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);
@@ -1117,6 +1132,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));
   }
@@ -1177,6 +1195,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);
   }
@@ -1391,6 +1412,9 @@
   .rounded-none {
     border-radius: 0;
   }
+  .rounded-sm {
+    border-radius: var(--radius-sm);
+  }
   .rounded-xl {
     border-radius: var(--radius-xl);
   }
@@ -1523,6 +1547,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);
   }
@@ -1646,6 +1673,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);
   }
@@ -1715,6 +1745,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);
   }
@@ -1730,6 +1763,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);
   }
@@ -1768,6 +1804,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)) {
@@ -1789,6 +1829,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)) {
@@ -1805,6 +1849,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));
@@ -1908,6 +1956,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);
   }
@@ -2010,6 +2061,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));
@@ -2119,6 +2173,9 @@
   .whitespace-pre {
     white-space: pre;
   }
+  .whitespace-pre-wrap {
+    white-space: pre-wrap;
+  }
   .text-\(--accent\) {
     color: var(--accent);
   }
@@ -2185,9 +2242,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);
   }
@@ -2221,6 +2287,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);
   }
@@ -2454,6 +2526,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));
@@ -2474,6 +2550,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));
@@ -2719,6 +2800,13 @@
       }
     }
   }
+  .hover\:border-primary-300 {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-primary-300);
+      }
+    }
+  }
   .hover\:bg-\(--fe-surface-hover\) {
     &:hover {
       @media (hover: hover) {
@@ -3409,6 +3497,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);
@@ -3734,6 +3830,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);
@@ -3779,6 +3880,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 {
@@ -3824,6 +3934,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 {
@@ -3875,6 +3994,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 {

package/dist/styles/tokens/core.css

@@ -53,4 +53,14 @@
   --color-warning-700: var(--color-orange-700);
   --color-warning-800: var(--color-orange-800);
   --color-warning-900: var(--color-orange-900);
+
+  /* Chart palette — semantic color rotation for series */
+  --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);
 }