opus-react 0.2.9 → 0.2.10

package/dist/index.css

@@ -1215,6 +1215,300 @@
   line-height: 1.4;
 }
 
+/* components/fields/RichTextField/RichTextField.module.css */
+.opus_6HFqZH_field {
+  gap: 6px;
+  width: 100%;
+  display: grid;
+}
+
+.opus_6HFqZH_editorShell {
+  border: 1px solid var(--opus-border-strong);
+  border-radius: var(--opus-input-radius);
+  background: var(--opus-input-bg);
+  box-shadow: inset 0 1px #ffffff0d, 0 14px 30px #0000000f;
+}
+
+.opus_6HFqZH_editorShell:focus-within {
+  border-color: var(--opus-accent);
+  box-shadow: 0 0 0 4px color-mix(in srgb, var(--opus-accent) 22%, transparent),
+    0 14px 30px #0000000f;
+}
+
+.opus_6HFqZH_error {
+  border-color: color-mix(in srgb, var(--opus-error) 75%, transparent);
+}
+
+.opus_6HFqZH_toolbar {
+  border-bottom: 1px solid var(--opus-border-strong);
+  border-top-left-radius: var(--opus-input-radius);
+  border-top-right-radius: var(--opus-input-radius);
+  background: color-mix(in srgb, var(--opus-surface-raised) 88%, transparent);
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 3px;
+  padding: 6px;
+  display: flex;
+}
+
+.opus_6HFqZH_divider {
+  background: color-mix(in srgb, var(--opus-border-strong) 80%, transparent);
+  align-self: stretch;
+  width: 1px;
+  margin: 2px 4px;
+}
+
+.opus_6HFqZH_blockSelect {
+  border: 1px solid var(--opus-border-strong);
+  background: var(--opus-input-bg);
+  min-height: 26px;
+  color: var(--opus-text);
+  cursor: pointer;
+  border-radius: 5px;
+  padding: 0 6px;
+  font-size: .72rem;
+  font-weight: 600;
+}
+
+.opus_6HFqZH_blockSelect:focus-visible {
+  border-color: var(--opus-accent);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--opus-accent) 22%, transparent);
+  outline: none;
+}
+
+.opus_6HFqZH_blockSelect:disabled {
+  opacity: .55;
+  cursor: not-allowed;
+}
+
+.opus_6HFqZH_buttonWrap {
+  display: inline-flex;
+  position: relative;
+}
+
+.opus_6HFqZH_toolbarButton {
+  width: 24px;
+  height: 24px;
+  color: var(--opus-text);
+  cursor: pointer;
+  background: none;
+  border: 1px solid #0000;
+  border-radius: 5px;
+  justify-content: center;
+  align-items: center;
+  line-height: 1;
+  transition: background .14s, border-color .14s, color .14s;
+  display: inline-flex;
+}
+
+.opus_6HFqZH_toolbarIcon {
+  width: 12px;
+  height: 12px;
+  font-size: .7rem;
+}
+
+.opus_6HFqZH_toolbarButton:hover:not(:disabled) {
+  border-color: var(--opus-border-strong);
+  background: color-mix(in srgb, var(--opus-accent-soft) 55%, transparent);
+}
+
+.opus_6HFqZH_toolbarButton:focus-visible {
+  border-color: var(--opus-accent);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--opus-accent) 22%, transparent);
+  outline: none;
+}
+
+.opus_6HFqZH_toolbarButtonActive {
+  border-color: color-mix(in srgb, var(--opus-accent) 45%, transparent);
+  background: var(--opus-accent);
+  color: var(--opus-accent-contrast, #fff);
+}
+
+.opus_6HFqZH_toolbarButtonActive:hover:not(:disabled) {
+  background: var(--opus-accent);
+  color: var(--opus-accent-contrast, #fff);
+}
+
+.opus_6HFqZH_toolbarButton:disabled {
+  opacity: .5;
+  cursor: not-allowed;
+}
+
+.opus_6HFqZH_colorSwatch {
+  border-radius: 2px;
+  height: 3px;
+  position: absolute;
+  bottom: 2px;
+  left: 3px;
+  right: 3px;
+}
+
+.opus_6HFqZH_colorInput {
+  opacity: 0;
+  cursor: pointer;
+  border: 0;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  position: absolute;
+  inset: 0;
+}
+
+.opus_6HFqZH_colorInput:disabled {
+  cursor: not-allowed;
+}
+
+.opus_6HFqZH_tooltip {
+  z-index: 30;
+  background: var(--opus-tooltip-bg, #1f2430);
+  color: var(--opus-tooltip-text, #fff);
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  visibility: hidden;
+  border-radius: 6px;
+  padding: 4px 8px;
+  font-size: .7rem;
+  font-weight: 600;
+  line-height: 1.2;
+  transition: opacity .12s, transform .12s;
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%) translateY(2px);
+  box-shadow: 0 6px 18px #00000038;
+}
+
+.opus_6HFqZH_tooltip:before {
+  content: "";
+  border: 4px solid #0000;
+  border-bottom-color: var(--opus-tooltip-bg, #1f2430);
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.opus_6HFqZH_buttonWrap:hover .opus_6HFqZH_tooltip, .opus_6HFqZH_toolbarButton:focus-visible + .opus_6HFqZH_tooltip {
+  opacity: 1;
+  visibility: visible;
+  transform: translateX(-50%) translateY(0);
+}
+
+.opus_6HFqZH_editor {
+  min-height: 180px;
+  color: var(--opus-text);
+  font-size: var(--opus-control-font-size);
+  border-bottom-left-radius: var(--opus-input-radius);
+  border-bottom-right-radius: var(--opus-input-radius);
+  outline: none;
+  padding: 12px 14px;
+  line-height: 1.6;
+}
+
+.opus_6HFqZH_editor:empty:before {
+  content: attr(data-placeholder);
+  color: color-mix(in srgb, var(--opus-muted) 80%, transparent);
+  pointer-events: none;
+}
+
+.opus_6HFqZH_editor p {
+  margin: 0 0 .75em;
+}
+
+.opus_6HFqZH_editor p:last-child {
+  margin-bottom: 0;
+}
+
+.opus_6HFqZH_editor h1, .opus_6HFqZH_editor h2, .opus_6HFqZH_editor h3 {
+  margin: 0 0 .5em;
+  font-weight: 700;
+  line-height: 1.25;
+}
+
+.opus_6HFqZH_editor h1 {
+  font-size: 1.6rem;
+}
+
+.opus_6HFqZH_editor h2 {
+  font-size: 1.35rem;
+}
+
+.opus_6HFqZH_editor h3 {
+  font-size: 1.15rem;
+}
+
+.opus_6HFqZH_editor ul, .opus_6HFqZH_editor ol {
+  margin: 0 0 .75em;
+  padding-left: 1.4em;
+}
+
+.opus_6HFqZH_editor li {
+  margin: .15em 0;
+}
+
+.opus_6HFqZH_editor a {
+  color: var(--opus-accent);
+  text-decoration: underline;
+}
+
+.opus_6HFqZH_editor blockquote {
+  border-left: 3px solid color-mix(in srgb, var(--opus-accent) 55%, transparent);
+  color: var(--opus-muted);
+  margin: 0 0 .75em;
+  padding: 4px 0 4px 14px;
+  font-style: italic;
+}
+
+.opus_6HFqZH_editor pre {
+  background: color-mix(in srgb, var(--opus-surface-sunken, #0b0b0f) 92%, transparent);
+  color: var(--opus-text);
+  font-family: var(--opus-font-mono, ui-monospace, monospace);
+  white-space: pre-wrap;
+  border-radius: 8px;
+  margin: 0 0 .75em;
+  padding: 12px 14px;
+  font-size: .85rem;
+  overflow-x: auto;
+}
+
+.opus_6HFqZH_editor img {
+  border-radius: 6px;
+  max-width: 100%;
+  height: auto;
+}
+
+.opus_6HFqZH_editor hr {
+  border: 0;
+  border-top: 1px solid var(--opus-border-strong);
+  margin: 1em 0;
+}
+
+.opus_6HFqZH_editor table {
+  border-collapse: collapse;
+  width: 100%;
+  margin: 0 0 .75em;
+  font-size: .9em;
+}
+
+.opus_6HFqZH_editor th, .opus_6HFqZH_editor td {
+  border: 1px solid var(--opus-border-strong);
+  text-align: left;
+  vertical-align: top;
+  min-width: 40px;
+  padding: 6px 8px;
+}
+
+.opus_6HFqZH_editor th {
+  background: color-mix(in srgb, var(--opus-surface-raised) 80%, transparent);
+  font-weight: 700;
+}
+
+.opus_6HFqZH_readOnly {
+  background: color-mix(in srgb, var(--opus-surface-raised) 70%, transparent);
+  cursor: default;
+}
+
 /* components/fields/TextField/TextField.module.css */
 .opus_SOck2f_input {
   width: 100%;