@rufous/ui 0.2.55 → 0.2.56

package/dist/main.css

@@ -6595,9 +6595,12 @@ pre {
 }
 .rf-rte-wrapper.rf-rte-resizable {
   resize: vertical;
-  overflow: auto;
+  overflow: visible;
   min-height: 200px;
 }
+.rf-rte-wrapper.rf-rte-resizable .editor-content-wrapper {
+  overflow: auto;
+}
 .rf-rte-wrapper:focus-within,
 .rf-rte-wrapper:has(.dropdown-menu),
 .rf-rte-wrapper:has(.ai-commands-panel),
@@ -6639,7 +6642,7 @@ pre {
   padding: 4px 8px;
   flex-wrap: wrap;
 }
-.rf-rte-wrapper .toolbar-row .with-close {
+.rf-rte-wrapper .toolbar-row.with-close {
   width: calc(100% - 32px);
 }
 .rf-rte-wrapper .toolbar-row + .toolbar-row,
@@ -6652,7 +6655,7 @@ pre {
   gap: 1px;
   padding: 4px 0px;
   position: absolute;
-  right: 0;
+  right: 4px;
   top: 0;
   width: 32px;
 }
@@ -6761,12 +6764,12 @@ pre {
   flex-shrink: 0;
 }
 .rf-rte-wrapper .dropdown-item:hover {
-  background: #e8eaed;
+  background: var(--hover-color, #fff5f5);
   color: #202124;
 }
 .rf-rte-wrapper .dropdown-item.is-active {
-  background: #d3e3fd;
-  color: #041e49;
+  background: var(--selection-color, #fff5f5);
+  color: #202124;
   font-weight: 500;
 }
 .rf-rte-wrapper .dropdown-item.heading-1 {
@@ -7017,13 +7020,14 @@ pre {
   justify-content: center;
   gap: 6px;
   transition: background 0.12s, color 0.12s;
+  border-radius: 0;
 }
 .rf-rte-wrapper .insert-tab:hover {
-  background: #f9fafb;
+  background: var(--hover-color, #fff5f5);
 }
 .rf-rte-wrapper .insert-tab.active {
-  background: #f3f4f6;
-  color: #111827;
+  background: var(--selection-color, #fff5f5);
+  color: var(--text-color);
   font-weight: 600;
 }
 .rf-rte-wrapper .insert-tab + .insert-tab {
@@ -7136,8 +7140,8 @@ pre {
   transition: background 0.1s;
 }
 .rf-rte-wrapper .char-btn:hover {
-  background: #eef2ff;
-  border-color: #6366f1;
+  background: var(--hover-color, #fff5f5);
+  border-color: var(--secondary-color, #7f1d1d);
 }
 .rf-rte-wrapper .task-status-item {
   gap: 8px;
@@ -7151,6 +7155,7 @@ pre {
   border-radius: 3px;
   font-size: 12px;
   line-height: 1;
+  box-sizing: unset !important;
 }
 .rf-rte-wrapper .task-icon img {
   width: 18px;
@@ -7883,45 +7888,57 @@ pre {
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(0, 0, 0, 0.4);
+  background: rgba(0, 0, 0, 0.5);
   z-index: 99999;
   display: flex;
   align-items: center;
   justify-content: center;
+  backdrop-filter: blur(2px);
 }
 .modal-content {
-  background: #fff;
+  background: var(--surface-color, #fff);
+  color: var(--text-color, #1f2937);
   border-radius: 12px;
   width: 680px;
   max-width: 95vw;
   max-height: 90vh;
   overflow-y: auto;
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.08);
 }
 .modal-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 16px 20px;
-  border-bottom: 1px solid #e5e7eb;
+  padding: 15px 24px;
+  border-bottom: 1px solid var(--border-color, #e5e7eb);
 }
 .modal-header h3 {
   margin: 0;
-  font-size: 18px;
-  font-weight: 600;
-  color: #1f2937;
+  font-size: 1.1rem;
+  font-weight: 700;
+  color: var(--text-color, #1f2937);
 }
 .modal-close {
-  background: none;
-  border: none;
-  font-size: 24px;
-  color: #9ca3af;
+  background: var(--surface-color, #fff);
+  border: 1px solid var(--border-color, #e5e7eb);
   cursor: pointer;
-  padding: 0 4px;
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  font-size: 18px;
+  color: var(--text-secondary, #6b7280);
   line-height: 1;
+  transition: all 0.2s;
+  flex-shrink: 0;
 }
 .modal-close:hover {
-  color: #1f2937;
+  border-color: var(--primary-color, #991b1b);
+  background: var(--hover-color, #fff5f5);
+  color: var(--primary-color, #991b1b);
 }
 .modal-body {
   padding: 20px;
@@ -7989,10 +8006,11 @@ pre {
   font-size: 14px;
   cursor: pointer;
   transition: background 0.12s;
+  border-radius: 0;
 }
 .modal-tab.active {
-  background: #f3f4f6;
-  color: #111827;
+  background: var(--selection-color, #fff5f5);
+  color: var(--text-color);
   font-weight: 600;
 }
 .modal-tab + .modal-tab {
@@ -8043,41 +8061,49 @@ pre {
   display: flex;
   gap: 12px;
 }
-.modal-btn-cancel {
-  padding: 8px 16px;
-  border: none;
-  background: transparent;
-  color: #6b7280;
-  font-size: 14px;
-  cursor: pointer;
-}
-.modal-btn-cancel:hover {
-  color: #1f2937;
-}
+.modal-btn-cancel,
 .modal-btn-delete {
-  padding: 8px 16px;
-  border: none;
-  background: transparent;
-  color: #6b7280;
+  background-color: transparent;
+  border: 1.5px solid var(--primary-color, #991b1b);
+  color: var(--primary-color, #991b1b);
+  border-radius: 34px;
+  padding: 10px 24px;
   font-size: 14px;
+  font-weight: 600;
   cursor: pointer;
+  text-transform: uppercase;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: inherit;
+  transition: all 0.2s;
+  outline: none;
 }
+.modal-btn-cancel:hover,
 .modal-btn-delete:hover {
-  color: #dc2626;
+  border-color: var(--secondary-color, #7f1d1d);
+  background-color: var(--hover-color, #fff5f5);
 }
 .modal-btn-apply {
-  padding: 8px 24px;
+  background-color: var(--primary-color, #991b1b);
+  color: #fff;
   border: none;
   border-radius: 6px;
-  background: #991b1b;
-  color: #fff;
+  padding: 10px 32px;
   font-size: 14px;
   font-weight: 600;
   cursor: pointer;
-  transition: background 0.15s;
+  text-transform: uppercase;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: inherit;
+  transition: all 0.2s;
 }
-.modal-btn-apply:hover {
-  background: #7f1d1d;
+.modal-btn-apply:hover:not(:disabled) {
+  background-color: var(--secondary-color, #7f1d1d);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+  transform: translateY(-1px);
 }
 .rf-rte-wrapper .translate-split-btn {
   display: inline-flex;
@@ -8402,45 +8428,57 @@ pre {
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(0, 0, 0, 0.4);
+  background: rgba(0, 0, 0, 0.5);
   z-index: 99998;
   display: flex;
   align-items: center;
   justify-content: center;
+  backdrop-filter: blur(2px);
 }
 .ai-modal {
-  background: #fff;
-  border-radius: 8px;
+  background: var(--surface-color, #fff);
+  color: var(--text-color, #1f2937);
+  border-radius: 12px;
   width: 620px;
   max-width: 90vw;
   max-height: 85vh;
   display: flex;
   flex-direction: column;
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.08);
 }
 .ai-modal-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 16px 20px 12px;
-  border-bottom: 1px solid #f3f4f6;
+  padding: 15px 24px;
+  border-bottom: 1px solid var(--border-color, #e5e7eb);
 }
 .ai-modal-title {
-  font-size: 18px;
-  font-weight: 600;
-  color: #1f2937;
+  font-size: 1.1rem;
+  font-weight: 700;
+  color: var(--text-color, #1f2937);
 }
 .ai-modal-close {
-  background: none;
-  border: none;
-  font-size: 22px;
-  color: #9ca3af;
+  background: var(--surface-color, #fff);
+  border: 1px solid var(--border-color, #e5e7eb);
   cursor: pointer;
-  padding: 0 4px;
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  font-size: 18px;
+  color: var(--text-secondary, #6b7280);
   line-height: 1;
+  transition: all 0.2s;
+  flex-shrink: 0;
 }
 .ai-modal-close:hover {
-  color: #1f2937;
+  border-color: var(--primary-color, #991b1b);
+  background: var(--hover-color, #fff5f5);
+  color: var(--primary-color, #991b1b);
 }
 .ai-modal-prompt-section {
   padding: 16px 20px 12px;
@@ -8460,36 +8498,37 @@ pre {
 .ai-modal-prompt {
   flex: 1;
   padding: 10px 12px;
-  border: 2px solid #3b82f6;
+  border: 1px solid var(--border-color, #e5e7eb);
   border-radius: 6px;
   font-size: 14px;
   font-family: inherit;
-  color: #1f2937;
+  color: var(--text-color, #1f2937);
   resize: vertical;
   min-height: 60px;
   outline: none;
+  transition: border-color 0.15s, box-shadow 0.15s;
 }
 .ai-modal-prompt:focus {
-  border-color: #2563eb;
+  border-color: var(--primary-color, #991b1b);
+  box-shadow: 0 0 0 2px rgba(153, 27, 27, 0.08);
 }
 .ai-modal-robot-btn {
   flex-shrink: 0;
-  width: 40px;
-  height: 40px;
-  border: 1px solid #e5e7eb;
-  border-radius: 6px;
-  background: #fff;
+  width: 42px;
+  height: 42px;
+  border: 1px solid var(--border-color, #e5e7eb);
+  border-radius: 8px;
+  background: var(--surface-color, #fff);
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #6b7280;
+  color: var(--primary-color, #991b1b);
   transition: all 0.15s;
 }
 .ai-modal-robot-btn:hover {
-  background: #f9fafb;
-  color: #1f2937;
-  border-color: #d1d5db;
+  background: var(--hover-color, #fff5f5);
+  border-color: var(--primary-color, #991b1b);
 }
 .ai-modal-robot-btn:disabled {
   opacity: 0.4;
@@ -8573,24 +8612,28 @@ pre {
 .ai-modal-footer {
   display: flex;
   justify-content: flex-end;
-  padding: 12px 20px 16px;
+  padding: 16px 24px;
+  border-top: 1px solid var(--border-color, #e5e7eb);
 }
 .ai-modal-cancel-btn {
-  background: none;
-  border: 2px solid #991b1b;
-  color: #991b1b;
-  padding: 8px 24px;
-  border-radius: 6px;
-  font-size: 13px;
-  font-weight: 700;
-  letter-spacing: 0.5px;
+  background-color: transparent;
+  border: 1.5px solid var(--primary-color, #991b1b);
+  color: var(--primary-color, #991b1b);
+  border-radius: 34px;
+  padding: 10px 24px;
+  font-size: 14px;
+  font-weight: 600;
   cursor: pointer;
+  text-transform: uppercase;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
   font-family: inherit;
-  transition: all 0.15s;
+  transition: all 0.2s;
 }
 .ai-modal-cancel-btn:hover {
-  background: #991b1b;
-  color: #fff;
+  background-color: var(--hover-color, #fff5f5);
 }
 .link-modal-overlay {
   position: fixed;

package/dist/main.d.cts

@@ -1622,6 +1622,8 @@ interface PhoneFieldProps {
 }
 declare const PhoneField: React__default.ForwardRefExoticComponent<PhoneFieldProps & React__default.RefAttributes<HTMLDivElement>>;
 
+type ToolbarButton = 'undo' | 'redo' | 'ai' | 'paragraph' | 'fontsize' | 'font' | 'color' | 'bold' | 'italic' | 'strike' | 'link' | 'lineheight' | 'ul' | 'ol' | 'align' | 'indent' | 'outdent' | 'table' | 'image' | 'video' | 'cut' | 'copy' | 'paste' | 'specialchars' | 'code' | 'fullscreen' | 'tts' | 'stt' | 'translate' | 'todo' | '|';
+type EditorVariant = 'default' | 'basic';
 interface RufousTextEditorProps {
     content?: string;
     placeholder?: string;
@@ -1641,6 +1643,10 @@ interface RufousTextEditorProps {
         name: string;
         avatar?: string;
     }>;
+    variant?: EditorVariant;
+    buttons?: ToolbarButton[];
+    hideButtons?: ToolbarButton[];
+    width?: number | string;
     height?: number | string;
     resizable?: boolean;
     className?: string;

package/dist/main.d.ts

@@ -1622,6 +1622,8 @@ interface PhoneFieldProps {
 }
 declare const PhoneField: React__default.ForwardRefExoticComponent<PhoneFieldProps & React__default.RefAttributes<HTMLDivElement>>;
 
+type ToolbarButton = 'undo' | 'redo' | 'ai' | 'paragraph' | 'fontsize' | 'font' | 'color' | 'bold' | 'italic' | 'strike' | 'link' | 'lineheight' | 'ul' | 'ol' | 'align' | 'indent' | 'outdent' | 'table' | 'image' | 'video' | 'cut' | 'copy' | 'paste' | 'specialchars' | 'code' | 'fullscreen' | 'tts' | 'stt' | 'translate' | 'todo' | '|';
+type EditorVariant = 'default' | 'basic';
 interface RufousTextEditorProps {
     content?: string;
     placeholder?: string;
@@ -1641,6 +1643,10 @@ interface RufousTextEditorProps {
         name: string;
         avatar?: string;
     }>;
+    variant?: EditorVariant;
+    buttons?: ToolbarButton[];
+    hideButtons?: ToolbarButton[];
+    width?: number | string;
     height?: number | string;
     resizable?: boolean;
     className?: string;