@rufous/ui 0.2.55 → 0.2.57

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;
@@ -1660,6 +1666,7 @@ interface MentionItemData {
     id: string;
     name: string;
     avatar?: string;
+    shortName?: string;
 }
 
 export { APP_THEMES, Accordion, AccordionDetails, type AccordionDetailsProps, type AccordionProps, AccordionSummary, type AccordionSummaryProps, type Action, ActivateUserIcon, AddButton, AddressLookup, ArchivedIcon, AssignGroupIcon, Autocomplete, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, BaseDialog, Box, type BoxProps, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, CameraIcon, CancelButton, Card, CardActions, type CardActionsProps, CardContent, type CardContentProps, CardHeader, type CardHeaderProps, CardMedia, type CardMediaProps, type CardProps, Checkbox, type CheckboxProps, Chip, type ChipProps, CircularProgress, CircularProgressIcon, type CircularProgressIconProps, CloseIcon, Collapse, type CollapseProps, type Column, CopyIcon, DataGrid, type DataGridProps, DateField, type DateFieldProps, type DateFormatString, DateRangeField, type DateRangeFieldProps, type DateRangeValue, DifficultyAllIcon, DifficultyEasyIcon, DifficultyHardIcon, DifficultyMediumIcon, Divider, type DividerProps, DollarIcon, DownloadIcon, DownloadPdfIcon, Drawer, type DrawerProps, EditChatIcon, EditIcon, EngagementIcon, Fade, type FadeProps, FunctionIcon, Grid, type GridProps, Grow, type GrowProps, HelpOutlinedIcon, HierarchyIcon, IconButton, type IconButtonProps, ImageField, type ImageFieldProps, InactiveGroupIcon, IndustryIcon, InvoiceIcon, Link, type LinkProps, List, ListItem, ListItemButton, type ListItemButtonProps, ListItemIcon, type ListItemIconProps, type ListItemProps, ListItemText, type ListItemTextProps, type ListProps, ListSubheader, type ListSubheaderProps, LocationPinIcon, LogsIcon, Menu, MenuDivider, MenuItem, type MenuItemProps, MenuList, type MenuListProps, type MenuProps, MinExperienceIcon, NineDotMenuIcon, NotificationIcon, Paper, type PaperProps, PhoneField, type PhoneFieldProps, Popover, type PopoverProps, Popper, type PopperProps, ProjectIcon, QualificationsIcon, QuestionStatusAllIcon, QuestionStatusPrivateIcon, QuestionStatusPublicIcon, QuestionTypeAllIcon, QuestionTypeCodingIcon, QuestionTypeDescriptiveIcon, QuestionTypeMultipleIcon, QuestionTypeSingleIcon, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Rating, type RatingProps, RefreshIcon, ResendInviteIcon, RolesIcon, RufousAiIcon, RufousBirdIcon, RufousLauncherIcon, RufousLogoLoader, type RufousLogoLoaderProps, RufousTextContent, type RufousTextContentProps, RufousTextEditor, type MentionItemData as RufousTextEditorMentionItem, type RufousTextEditorProps, RufousThemeProvider, Select, type SelectProps, SidebarIcon, Skeleton, type SkeletonProps, Slide, type SlideProps, Slider, type SliderProps, Snackbar, type SnackbarProps, SoftSkillsIcon, type SortDirection, Stack, type StackProps, StandardButton, Step, StepButton, type StepButtonProps, StepContent, type StepContentProps, StepLabel, type StepLabelProps, type StepProps, Stepper, type StepperProps, SubmitButton, SubscribeIcon, SuspendUserIcon, Switch, type SwitchProps, type SxProp, Tab, TabPanel, type TabPanelProps, type TabProps, Tabs, type TabsProps, TechnicalSkillsIcon, TextField, type TextFieldProps, TickIcon, TimerIcon, ToggleButton, ToggleButtonGroup, type ToggleButtonGroupProps, type ToggleButtonProps, Tooltip, type TooltipProps, TrashIcon, Typography, type TypographyProps, UnArchivedIcon, UnsubscribeIcon, UploadIcon, UserAssignIcon, ViewIcon, WorkItemIcon, Zoom, type ZoomProps, useRufousTheme };

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;
@@ -1660,6 +1666,7 @@ interface MentionItemData {
     id: string;
     name: string;
     avatar?: string;
+    shortName?: string;
 }
 
 export { APP_THEMES, Accordion, AccordionDetails, type AccordionDetailsProps, type AccordionProps, AccordionSummary, type AccordionSummaryProps, type Action, ActivateUserIcon, AddButton, AddressLookup, ArchivedIcon, AssignGroupIcon, Autocomplete, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, BaseDialog, Box, type BoxProps, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, CameraIcon, CancelButton, Card, CardActions, type CardActionsProps, CardContent, type CardContentProps, CardHeader, type CardHeaderProps, CardMedia, type CardMediaProps, type CardProps, Checkbox, type CheckboxProps, Chip, type ChipProps, CircularProgress, CircularProgressIcon, type CircularProgressIconProps, CloseIcon, Collapse, type CollapseProps, type Column, CopyIcon, DataGrid, type DataGridProps, DateField, type DateFieldProps, type DateFormatString, DateRangeField, type DateRangeFieldProps, type DateRangeValue, DifficultyAllIcon, DifficultyEasyIcon, DifficultyHardIcon, DifficultyMediumIcon, Divider, type DividerProps, DollarIcon, DownloadIcon, DownloadPdfIcon, Drawer, type DrawerProps, EditChatIcon, EditIcon, EngagementIcon, Fade, type FadeProps, FunctionIcon, Grid, type GridProps, Grow, type GrowProps, HelpOutlinedIcon, HierarchyIcon, IconButton, type IconButtonProps, ImageField, type ImageFieldProps, InactiveGroupIcon, IndustryIcon, InvoiceIcon, Link, type LinkProps, List, ListItem, ListItemButton, type ListItemButtonProps, ListItemIcon, type ListItemIconProps, type ListItemProps, ListItemText, type ListItemTextProps, type ListProps, ListSubheader, type ListSubheaderProps, LocationPinIcon, LogsIcon, Menu, MenuDivider, MenuItem, type MenuItemProps, MenuList, type MenuListProps, type MenuProps, MinExperienceIcon, NineDotMenuIcon, NotificationIcon, Paper, type PaperProps, PhoneField, type PhoneFieldProps, Popover, type PopoverProps, Popper, type PopperProps, ProjectIcon, QualificationsIcon, QuestionStatusAllIcon, QuestionStatusPrivateIcon, QuestionStatusPublicIcon, QuestionTypeAllIcon, QuestionTypeCodingIcon, QuestionTypeDescriptiveIcon, QuestionTypeMultipleIcon, QuestionTypeSingleIcon, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Rating, type RatingProps, RefreshIcon, ResendInviteIcon, RolesIcon, RufousAiIcon, RufousBirdIcon, RufousLauncherIcon, RufousLogoLoader, type RufousLogoLoaderProps, RufousTextContent, type RufousTextContentProps, RufousTextEditor, type MentionItemData as RufousTextEditorMentionItem, type RufousTextEditorProps, RufousThemeProvider, Select, type SelectProps, SidebarIcon, Skeleton, type SkeletonProps, Slide, type SlideProps, Slider, type SliderProps, Snackbar, type SnackbarProps, SoftSkillsIcon, type SortDirection, Stack, type StackProps, StandardButton, Step, StepButton, type StepButtonProps, StepContent, type StepContentProps, StepLabel, type StepLabelProps, type StepProps, Stepper, type StepperProps, SubmitButton, SubscribeIcon, SuspendUserIcon, Switch, type SwitchProps, type SxProp, Tab, TabPanel, type TabPanelProps, type TabProps, Tabs, type TabsProps, TechnicalSkillsIcon, TextField, type TextFieldProps, TickIcon, TimerIcon, ToggleButton, ToggleButtonGroup, type ToggleButtonGroupProps, type ToggleButtonProps, Tooltip, type TooltipProps, TrashIcon, Typography, type TypographyProps, UnArchivedIcon, UnsubscribeIcon, UploadIcon, UserAssignIcon, ViewIcon, WorkItemIcon, Zoom, type ZoomProps, useRufousTheme };