@jacshuo/onyx 2.2.0 → 2.4.0

package/dist/styles/Extras/TypewriterText.css

@@ -24,6 +24,18 @@
   }
 }
 
+/* ── Image fade-in for rich mode ─────────────────────────── */
+@keyframes tw-img-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(5px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 /* ── Base cursor element ─────────────────────────────────── */
 .tw-cursor {
   display: inline-block;
@@ -53,3 +65,245 @@
   animation: tw-cursor-out 0.6s ease-out forwards;
   pointer-events: none;
 }
+
+/* ═══════════════════════════════════════════════════════════
+   RICH MODE — prose-style Markdown rendering
+   ═══════════════════════════════════════════════════════════ */
+
+/* ── Prose container ─────────────────────────────────────── */
+.tw-rich-prose {
+  font-size: 0.875rem;
+  line-height: 1.75;
+  color: var(--color-primary-900);
+  word-break: break-word;
+  overflow-wrap: break-word;
+}
+
+.dark .tw-rich-prose {
+  color: var(--color-primary-100);
+}
+
+/* ── Headings ────────────────────────────────────────────── */
+.tw-rich-prose h1,
+.tw-rich-prose h2,
+.tw-rich-prose h3,
+.tw-rich-prose h4,
+.tw-rich-prose h5,
+.tw-rich-prose h6 {
+  font-weight: 700;
+  line-height: 1.3;
+  margin-top: 1.25rem;
+  margin-bottom: 0.375rem;
+  color: var(--color-primary-950);
+}
+
+.dark .tw-rich-prose h1,
+.dark .tw-rich-prose h2,
+.dark .tw-rich-prose h3,
+.dark .tw-rich-prose h4,
+.dark .tw-rich-prose h5,
+.dark .tw-rich-prose h6 {
+  color: var(--color-primary-50);
+}
+
+.tw-rich-prose h1 {
+  font-size: 1.5rem;
+}
+.tw-rich-prose h2 {
+  font-size: 1.25rem;
+}
+.tw-rich-prose h3 {
+  font-size: 1.125rem;
+}
+.tw-rich-prose h4 {
+  font-size: 1rem;
+}
+.tw-rich-prose h5,
+.tw-rich-prose h6 {
+  font-size: 0.875rem;
+}
+
+/* ── Paragraphs ──────────────────────────────────────────── */
+.tw-rich-prose p {
+  margin-top: 0.625rem;
+  margin-bottom: 0.625rem;
+}
+
+.tw-rich-prose p:first-child {
+  margin-top: 0;
+}
+
+.tw-rich-prose p:last-child {
+  margin-bottom: 0;
+}
+
+/* ── Inline code ─────────────────────────────────────────── */
+.tw-rich-prose :not(pre) > code {
+  background-color: var(--color-primary-100);
+  color: var(--color-primary-700);
+  padding: 0.1em 0.35em;
+  border-radius: 0.25rem;
+  font-size: 0.8125em;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+}
+
+.dark .tw-rich-prose :not(pre) > code {
+  background-color: var(--color-primary-800);
+  color: var(--color-primary-200);
+}
+
+/* ── Fenced code blocks ──────────────────────────────────── */
+.tw-rich-prose pre {
+  background-color: var(--color-primary-100);
+  border-radius: 0.5rem;
+  padding: 0.875rem 1rem;
+  overflow-x: auto;
+  margin: 0.75rem 0;
+  font-size: 0.8125rem;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  line-height: 1.6;
+}
+
+.dark .tw-rich-prose pre {
+  background-color: var(--color-primary-800);
+}
+
+.tw-rich-prose pre > code {
+  background: none;
+  padding: 0;
+  font-size: inherit;
+  color: inherit;
+  border-radius: 0;
+}
+
+/* ── Blockquotes ─────────────────────────────────────────── */
+.tw-rich-prose blockquote {
+  border-left: 3px solid var(--color-primary-400);
+  padding: 0.375rem 0 0.375rem 1rem;
+  margin: 0.75rem 0;
+  color: var(--color-primary-600);
+  font-style: italic;
+}
+
+.dark .tw-rich-prose blockquote {
+  border-left-color: var(--color-primary-500);
+  color: var(--color-primary-400);
+}
+
+/* ── Lists ───────────────────────────────────────────────── */
+.tw-rich-prose ul,
+.tw-rich-prose ol {
+  padding-left: 1.5rem;
+  margin: 0.5rem 0;
+}
+
+.tw-rich-prose ul {
+  list-style: disc;
+}
+
+.tw-rich-prose ol {
+  list-style: decimal;
+}
+
+.tw-rich-prose li {
+  margin: 0.25rem 0;
+}
+
+.tw-rich-prose li > ul,
+.tw-rich-prose li > ol {
+  margin: 0.125rem 0 0.125rem 0.25rem;
+}
+
+/* ── Horizontal rule ─────────────────────────────────────── */
+.tw-rich-prose hr {
+  border: none;
+  border-top: 1px solid var(--color-primary-200);
+  margin: 1.25rem 0;
+}
+
+.dark .tw-rich-prose hr {
+  border-top-color: var(--color-primary-700);
+}
+
+/* ── Links ───────────────────────────────────────────────── */
+.tw-rich-prose a {
+  color: var(--color-primary-600);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.tw-rich-prose a:hover {
+  color: var(--color-primary-800);
+}
+
+.dark .tw-rich-prose a {
+  color: var(--color-primary-400);
+}
+
+.dark .tw-rich-prose a:hover {
+  color: var(--color-primary-200);
+}
+
+/* ── strong / em baseline ────────────────────────────────── */
+.tw-rich-prose strong {
+  font-weight: 700;
+}
+
+.tw-rich-prose em {
+  font-style: italic;
+}
+
+/* ═══════════════════════════════════════════════════════════
+   RICH MODE — image rendering
+   ═══════════════════════════════════════════════════════════ */
+
+/* Figure wrapper */
+.tw-rich-img-wrap {
+  display: block;
+  margin: 0.875rem 0;
+}
+
+/* Actual image */
+.tw-rich-img {
+  display: block;
+  max-width: 100%;
+  border-radius: 0.5rem;
+  box-shadow: 0 2px 8px rgb(0 0 0 / 0.1);
+  animation: tw-img-fade-in 0.4s ease-out both;
+}
+
+.dark .tw-rich-img {
+  box-shadow: 0 2px 8px rgb(0 0 0 / 0.3);
+}
+
+/* Error state overlay (hidden by default) */
+.tw-rich-img-error {
+  display: none;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 1.5rem;
+  border-radius: 0.5rem;
+  background-color: var(--color-primary-100);
+  color: var(--color-primary-400);
+  font-size: 0.75rem;
+  font-style: normal;
+  text-align: center;
+  min-height: 80px;
+  max-width: 100%;
+}
+
+.dark .tw-rich-img-error {
+  background-color: var(--color-primary-800);
+  color: var(--color-primary-500);
+}
+
+/* Toggle error state via JS class added by the image error handler */
+.tw-rich-img-wrap--error .tw-rich-img {
+  display: none;
+}
+
+.tw-rich-img-wrap--error .tw-rich-img-error {
+  display: flex;
+}

package/dist/styles/Forms/OTPInput.css

@@ -0,0 +1,11 @@
+/* OTPInput component styles */
+
+@keyframes otp-pop {
+  0% { transform: scale(1); }
+  40% { transform: scale(1.12); }
+  100% { transform: scale(1); }
+}
+
+.otp-pop {
+  animation: otp-pop 0.18s ease-out forwards;
+}

package/dist/styles/Layout/SplitPanel.css

@@ -0,0 +1,15 @@
+/* SplitPanel component styles.
+   The component uses Tailwind v4 utilities directly; this file holds only
+   CSS that cannot be expressed as utilities (e.g. transition on data-* state).
+*/
+
+/* Enforces that the panel container fills its parent when used without
+   an explicit width/height — matching the "100%" defaults in the props. */
+[data-split-panel] {
+  box-sizing: border-box;
+}
+
+/* Ensure all pane children respect the flex layout. */
+[data-split-pane-id] {
+  box-sizing: border-box;
+}

package/dist/styles/Primitives/DropdownButton.css

@@ -1 +1,26 @@
-@import "../Dropdown/Dropdown.css";
+:root {
+  --animate-dropdown-item-in: dropdown-item-in 200ms ease-out both;
+  --animate-dropdown-item-out: dropdown-item-out 150ms ease-in both;
+  --animate-dropdown-container-in: dropdown-container-in 150ms ease-out both;
+  --animate-dropdown-container-out: dropdown-container-out 120ms ease-in both;
+}
+
+@keyframes dropdown-item-in {
+  from { opacity: 0; transform: perspective(400px) rotateX(-50deg); transform-origin: top center; }
+  to { opacity: 1; transform: perspective(400px) rotateX(0deg); transform-origin: top center; }
+}
+
+@keyframes dropdown-item-out {
+  from { opacity: 1; transform: perspective(400px) rotateX(0deg); transform-origin: top center; }
+  to { opacity: 0; transform: perspective(400px) rotateX(-50deg); transform-origin: top center; }
+}
+
+@keyframes dropdown-container-in {
+  from { opacity: 0; transform: scaleY(0.96); transform-origin: top center; }
+  to { opacity: 1; transform: scaleY(1); transform-origin: top center; }
+}
+
+@keyframes dropdown-container-out {
+  from { opacity: 1; transform: scaleY(1); transform-origin: top center; }
+  to { opacity: 0; transform: scaleY(0.96); transform-origin: top center; }
+}

package/dist/styles/Primitives/Kbd.css

@@ -0,0 +1 @@
+/* Kbd component styles */

package/dist/styles/Primitives/Rating.css

@@ -0,0 +1 @@
+/* Rating component styles */