@rufous/ui 0.1.83 → 0.1.85

package/dist/main.css

@@ -1494,6 +1494,11 @@ pre {
   justify-content: space-between;
   padding: 18px 20px 12px;
 }
+.rf-date-picker__header-labels {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
 .rf-date-picker__month-label {
   font-size: 1rem;
   font-weight: 700;
@@ -1501,6 +1506,33 @@ pre {
   letter-spacing: -0.01em;
   cursor: pointer;
   user-select: none;
+  padding: 2px 6px;
+  border-radius: 6px;
+  transition: background-color 0.15s ease;
+}
+.rf-date-picker__month-label:hover {
+  background-color: rgba(164, 27, 6, 0.08);
+}
+.rf-date-picker__month-label--active {
+  background-color: rgba(164, 27, 6, 0.1);
+  color: #a41b06;
+}
+.rf-date-picker__year-label {
+  font-size: 1rem;
+  font-weight: 700;
+  color: #555555;
+  cursor: pointer;
+  user-select: none;
+  padding: 2px 6px;
+  border-radius: 6px;
+  transition: background-color 0.15s ease;
+}
+.rf-date-picker__year-label:hover {
+  background-color: rgba(164, 27, 6, 0.08);
+}
+.rf-date-picker__year-label--active {
+  background-color: rgba(164, 27, 6, 0.1);
+  color: #a41b06;
 }
 .rf-date-picker__nav {
   display: flex;
@@ -1884,6 +1916,83 @@ pre {
   color: rgba(0, 0, 0, 0.75);
   background-color: rgba(0, 0, 0, 0.05);
 }
+.rf-date-picker--drop-up {
+  top: auto;
+  bottom: calc(100% + 6px);
+  transform-origin: bottom left;
+}
+.rf-date-picker__month-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 6px;
+  padding: 8px 16px 12px;
+}
+.rf-date-picker__month-cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px 8px;
+  border-radius: 8px;
+  font-size: 0.85rem;
+  font-weight: 500;
+  color: #333333;
+  background: none;
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.12s ease, color 0.12s ease;
+  outline: none;
+}
+.rf-date-picker__month-cell:hover {
+  background-color: rgba(164, 27, 6, 0.08);
+}
+.rf-date-picker__month-cell--selected {
+  background-color: #a41b06;
+  color: #ffffff;
+  font-weight: 600;
+}
+.rf-date-picker__month-cell--selected:hover {
+  background-color: #8a1705;
+}
+.rf-date-picker__month-cell--current:not(.rf-date-picker__month-cell--selected) {
+  color: #a41b06;
+  font-weight: 600;
+}
+.rf-date-picker__year-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 6px;
+  padding: 8px 16px 12px;
+}
+.rf-date-picker__year-cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px 4px;
+  border-radius: 8px;
+  font-size: 0.85rem;
+  font-weight: 500;
+  color: #333333;
+  background: none;
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.12s ease, color 0.12s ease;
+  outline: none;
+}
+.rf-date-picker__year-cell:hover {
+  background-color: rgba(164, 27, 6, 0.08);
+}
+.rf-date-picker__year-cell--selected {
+  background-color: #a41b06;
+  color: #ffffff;
+  font-weight: 600;
+}
+.rf-date-picker__year-cell--selected:hover {
+  background-color: #8a1705;
+}
+.rf-date-picker__year-cell--current:not(.rf-date-picker__year-cell--selected) {
+  color: #a41b06;
+  font-weight: 600;
+}
 
 /* lib/styles/date-range-field.css */
 .rf-date-range-field {
@@ -2345,6 +2454,16 @@ pre {
   padding-left: 0;
   margin-top: 0;
 }
+.rf-autocomplete.rf-text-field--disabled .rf-text-field__wrapper {
+  cursor: not-allowed;
+}
+.rf-autocomplete.rf-text-field--disabled .rf-autocomplete__tag {
+  opacity: 0.5;
+}
+.rf-autocomplete.rf-text-field--disabled .rf-autocomplete__endgroup {
+  opacity: 0.35;
+  pointer-events: none;
+}
 .rf-autocomplete__icon-btn {
   background: none;
   border: none;
@@ -2571,6 +2690,18 @@ pre {
 .rf-select.rf-text-field--disabled .rf-text-field__wrapper {
   cursor: not-allowed;
 }
+.rf-select.rf-text-field--disabled .rf-select__display {
+  color: var(--tf-disabled-color, rgba(0, 0, 0, 0.38));
+}
+.rf-select.rf-text-field--disabled .rf-select__arrow {
+  color: rgba(0, 0, 0, 0.2);
+}
+.rf-select.rf-text-field--disabled .rf-select__chip {
+  opacity: 0.5;
+}
+.rf-select.rf-text-field--disabled .rf-select__count {
+  opacity: 0.5;
+}
 .rf-select__display {
   display: flex;
   align-items: center;
@@ -4893,6 +5024,12 @@ pre {
   align-items: center;
   font-size: 1.25rem;
 }
+.rf-tab-panel {
+  width: 100%;
+}
+.rf-tab-panel[hidden] {
+  display: none;
+}
 
 /* lib/styles/breadcrumbs.css */
 .rf-breadcrumbs {
@@ -5717,6 +5854,95 @@ pre {
   width: max-content;
 }
 
+/* lib/styles/image-field.css */
+.rf-image-field {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  cursor: pointer;
+  background-color: var(--border-color);
+  flex-shrink: 0;
+}
+.rf-image-field--circular {
+  border-radius: 50%;
+}
+.rf-image-field--rounded {
+  border-radius: 12px;
+}
+.rf-image-field--square {
+  border-radius: 0;
+}
+.rf-image-field--small {
+  width: 64px;
+  height: 64px;
+}
+.rf-image-field--medium {
+  width: 96px;
+  height: 96px;
+}
+.rf-image-field--large {
+  width: 128px;
+  height: 128px;
+}
+.rf-image-field__img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  transition: filter 0.25s ease;
+}
+.rf-image-field__placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  color: var(--text-secondary);
+  transition: filter 0.25s ease;
+}
+.rf-image-field__overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 4px;
+  background-color: rgba(0, 0, 0, 0.5);
+  opacity: 0;
+  transition: opacity 0.25s ease;
+  pointer-events: none;
+}
+.rf-image-field:hover .rf-image-field__overlay {
+  opacity: 1;
+}
+.rf-image-field:hover .rf-image-field__img {
+  filter: blur(2px);
+}
+.rf-image-field__overlay-text {
+  color: #ffffff;
+  font-size: 0.6875rem;
+  font-weight: 500;
+  font-family: var(--font-family);
+  text-align: center;
+  line-height: 1.2;
+}
+.rf-image-field__input {
+  display: none;
+}
+.rf-image-field:focus-visible {
+  outline: 2px solid var(--primary-color);
+  outline-offset: 2px;
+}
+.rf-image-field--disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+  pointer-events: none;
+  filter: grayscale(60%);
+}
+
 /* lib/styles/text-field.css */
 .rf-text-field {
   --tf-primary-color: #f15b24;
@@ -5812,10 +6038,28 @@ pre {
 .rf-text-field__input:focus {
   outline: none;
 }
+.rf-text-field--disabled {
+  pointer-events: none;
+}
+.rf-text-field--disabled .rf-text-field__wrapper {
+  cursor: not-allowed;
+  pointer-events: none;
+  background-color: rgba(0, 0, 0, 0.04);
+}
+.rf-text-field--disabled .rf-text-field__label {
+  color: var(--tf-disabled-color);
+}
+.rf-text-field--disabled .rf-text-field__adornment {
+  color: var(--tf-disabled-color);
+  opacity: 0.5;
+}
+.rf-text-field--disabled .rf-text-field__helper-text {
+  color: var(--tf-disabled-color);
+}
 .rf-text-field__input:disabled {
   opacity: 1;
   color: var(--tf-disabled-color);
-  cursor: default;
+  cursor: not-allowed;
 }
 .rf-text-field__input::placeholder {
   color: var(--tf-placeholder-color);
@@ -5919,7 +6163,10 @@ pre {
   border-width: 2px;
 }
 .rf-text-field--outlined.rf-text-field--disabled .rf-text-field__notch {
-  border-color: var(--tf-disabled-bg);
+  border-color: rgba(0, 0, 0, 0.15);
+}
+.rf-text-field--outlined.rf-text-field--disabled .rf-text-field__wrapper:hover .rf-text-field__notch {
+  border-color: rgba(0, 0, 0, 0.15);
 }
 .rf-text-field--filled .rf-text-field__wrapper {
   background-color: var(--tf-filled-bg);
@@ -5973,7 +6220,13 @@ pre {
   transform: translate(12px, 7px) scale(0.75);
 }
 .rf-text-field--filled.rf-text-field--disabled .rf-text-field__wrapper {
-  background-color: rgba(0, 0, 0, 0.03);
+  background-color: rgba(0, 0, 0, 0.04);
+}
+.rf-text-field--filled.rf-text-field--disabled .rf-text-field__wrapper:hover {
+  background-color: rgba(0, 0, 0, 0.04);
+}
+.rf-text-field--filled.rf-text-field--disabled .rf-text-field__wrapper:hover::before {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
 }
 .rf-text-field--filled.rf-text-field--disabled .rf-text-field__wrapper::before {
   border-bottom-style: dotted;
@@ -6023,6 +6276,9 @@ pre {
 .rf-text-field--standard.rf-text-field--disabled .rf-text-field__wrapper::before {
   border-bottom-style: dotted;
 }
+.rf-text-field--standard.rf-text-field--disabled .rf-text-field__wrapper:hover::before {
+  border-bottom: 1px dotted rgba(0, 0, 0, 0.42);
+}
 .rf-text-field--error .rf-text-field__label,
 .rf-text-field--error .rf-text-field__wrapper:focus-within .rf-text-field__label {
   color: var(--tf-error-color);
@@ -6129,6 +6385,13 @@ pre {
   margin-right: 10px;
   margin-left: 0;
 }
+.rf-text-field--compact.rf-text-field--disabled .rf-text-field__wrapper {
+  border-color: rgba(0, 0, 0, 0.12);
+  background-color: rgba(0, 0, 0, 0.04);
+}
+.rf-text-field--compact.rf-text-field--disabled .rf-text-field__wrapper:hover {
+  border-color: rgba(0, 0, 0, 0.12);
+}
 
 /* node_modules/jodit/es5/jodit.min.css */
 .jodit-ui-button-icon-text__icon {

package/dist/main.d.cts

@@ -383,6 +383,11 @@ interface QualificationsIconProps extends React.SVGProps<SVGSVGElement> {
 }
 declare const QualificationsIcon: React.FC<QualificationsIconProps>;
 
+interface CameraIconProps extends React.SVGProps<SVGSVGElement> {
+    color?: string;
+}
+declare const CameraIcon: React.FC<CameraIconProps>;
+
 type SxProp = {
     [key: string]: string | number | SxProp | undefined | null;
 };
@@ -544,7 +549,7 @@ interface AddressLookupProps {
  */
 declare const AddressLookup: ({ value, onChange, label, error, size, sx, layout, required, token, }: AddressLookupProps) => React__default.JSX.Element;
 
-type DateFormatString = "MM/DD/YYYY" | "DD/MM/YYYY" | "YYYY-MM-DD" | "DD-MM-YYYY" | "MM-DD-YYYY" | "YYYY/MM/DD";
+type DateFormatString = "MM/DD/YYYY" | "DD/MM/YYYY" | "YYYY-MM-DD" | "DD-MM-YYYY" | "MM-DD-YYYY" | "YYYY/MM/DD" | "DD MMM YYYY" | "MMM DD, YYYY" | "DD MMMM YYYY" | "MMMM DD, YYYY";
 interface DateFieldProps {
     /** Floating label */
     label?: string;
@@ -749,11 +754,13 @@ interface DataGridProps<T> {
     pageSize?: number;
     pageSizeOptions?: number[];
     title?: string;
+    className?: string;
+    sx?: SxProp;
 }
 
 declare function DataGrid<T extends {
     id: string | number;
-}>({ columns: initialColumnsProp, data, actions, pageSize: initialPageSize, pageSizeOptions, title }: DataGridProps<T>): React__default.JSX.Element;
+}>({ columns: initialColumnsProp, data, actions, pageSize: initialPageSize, pageSizeOptions, title, className, sx, }: DataGridProps<T>): React__default.JSX.Element;
 
 interface MentionItem {
     id: string;
@@ -1115,6 +1122,23 @@ interface BoxProps extends React.HTMLAttributes<HTMLElement> {
     margin?: string | number;
     width?: string | number;
     height?: string | number;
+    minWidth?: string | number;
+    maxWidth?: string | number;
+    minHeight?: string | number;
+    maxHeight?: string | number;
+    flex?: string | number;
+    flexWrap?: string;
+    flexGrow?: number;
+    flexShrink?: number;
+    overflow?: string;
+    position?: string;
+    top?: string | number;
+    right?: string | number;
+    bottom?: string | number;
+    left?: string | number;
+    borderRadius?: string | number;
+    bgcolor?: string;
+    color?: string;
     className?: string;
     style?: CSSProperties;
     sx?: SxProp;
@@ -1129,6 +1153,8 @@ interface StackProps extends React.HTMLAttributes<HTMLElement> {
     divider?: ReactNode;
     flexWrap?: "nowrap" | "wrap" | "wrap-reverse";
     useFlexGap?: boolean;
+    flex?: string | number;
+    overflow?: string;
     component?: keyof React.JSX.IntrinsicElements;
     children: ReactNode;
     className?: string;
@@ -1277,6 +1303,16 @@ interface TabsProps {
     sx?: SxProp;
 }
 declare const Tabs: React__default.FC<TabsProps>;
+interface TabPanelProps {
+    value: string | number;
+    activeValue: string | number;
+    children: ReactNode;
+    keepMounted?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    sx?: SxProp;
+}
+declare const TabPanel: React__default.FC<TabPanelProps>;
 
 interface BreadcrumbsProps {
     separator?: ReactNode;
@@ -1527,4 +1563,27 @@ interface ZoomProps extends BaseTransitionProps {
 }
 declare const Zoom: React__default.FC<ZoomProps>;
 
-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, 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, 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, type MentionItem, Menu, MenuDivider, MenuItem, type MenuItemProps, MenuList, type MenuListProps, type MenuProps, MinExperienceIcon, NineDotMenuIcon, NotificationIcon, Paper, type PaperProps, 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, RichTextEditor, type RichTextEditorProps, RolesIcon, RufousAiIcon, RufousBirdIcon, RufousLauncherIcon, RufousLogoLoader, type RufousLogoLoaderProps, 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, 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 };
+interface ImageFieldProps {
+    /** Current image URL to display */
+    src?: string;
+    /** Alt text for the image */
+    alt?: string;
+    /** Shape of the image field */
+    variant?: "circular" | "rounded" | "square";
+    /** Predefined size or custom pixel value */
+    size?: "small" | "medium" | "large" | number;
+    /** Accepted file types (default: "image/*") */
+    accept?: string;
+    /** Called with the selected File when user picks an image */
+    onChange?: (file: File) => void;
+    /** Overlay label text (default: "Upload") */
+    overlayText?: string;
+    /** Disable interaction */
+    disabled?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    sx?: SxProp;
+}
+declare const ImageField: React__default.ForwardRefExoticComponent<ImageFieldProps & React__default.RefAttributes<HTMLDivElement>>;
+
+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, 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, 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, type MentionItem, Menu, MenuDivider, MenuItem, type MenuItemProps, MenuList, type MenuListProps, type MenuProps, MinExperienceIcon, NineDotMenuIcon, NotificationIcon, Paper, type PaperProps, 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, RichTextEditor, type RichTextEditorProps, RolesIcon, RufousAiIcon, RufousBirdIcon, RufousLauncherIcon, RufousLogoLoader, type RufousLogoLoaderProps, 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

@@ -383,6 +383,11 @@ interface QualificationsIconProps extends React.SVGProps<SVGSVGElement> {
 }
 declare const QualificationsIcon: React.FC<QualificationsIconProps>;
 
+interface CameraIconProps extends React.SVGProps<SVGSVGElement> {
+    color?: string;
+}
+declare const CameraIcon: React.FC<CameraIconProps>;
+
 type SxProp = {
     [key: string]: string | number | SxProp | undefined | null;
 };
@@ -544,7 +549,7 @@ interface AddressLookupProps {
  */
 declare const AddressLookup: ({ value, onChange, label, error, size, sx, layout, required, token, }: AddressLookupProps) => React__default.JSX.Element;
 
-type DateFormatString = "MM/DD/YYYY" | "DD/MM/YYYY" | "YYYY-MM-DD" | "DD-MM-YYYY" | "MM-DD-YYYY" | "YYYY/MM/DD";
+type DateFormatString = "MM/DD/YYYY" | "DD/MM/YYYY" | "YYYY-MM-DD" | "DD-MM-YYYY" | "MM-DD-YYYY" | "YYYY/MM/DD" | "DD MMM YYYY" | "MMM DD, YYYY" | "DD MMMM YYYY" | "MMMM DD, YYYY";
 interface DateFieldProps {
     /** Floating label */
     label?: string;
@@ -749,11 +754,13 @@ interface DataGridProps<T> {
     pageSize?: number;
     pageSizeOptions?: number[];
     title?: string;
+    className?: string;
+    sx?: SxProp;
 }
 
 declare function DataGrid<T extends {
     id: string | number;
-}>({ columns: initialColumnsProp, data, actions, pageSize: initialPageSize, pageSizeOptions, title }: DataGridProps<T>): React__default.JSX.Element;
+}>({ columns: initialColumnsProp, data, actions, pageSize: initialPageSize, pageSizeOptions, title, className, sx, }: DataGridProps<T>): React__default.JSX.Element;
 
 interface MentionItem {
     id: string;
@@ -1115,6 +1122,23 @@ interface BoxProps extends React.HTMLAttributes<HTMLElement> {
     margin?: string | number;
     width?: string | number;
     height?: string | number;
+    minWidth?: string | number;
+    maxWidth?: string | number;
+    minHeight?: string | number;
+    maxHeight?: string | number;
+    flex?: string | number;
+    flexWrap?: string;
+    flexGrow?: number;
+    flexShrink?: number;
+    overflow?: string;
+    position?: string;
+    top?: string | number;
+    right?: string | number;
+    bottom?: string | number;
+    left?: string | number;
+    borderRadius?: string | number;
+    bgcolor?: string;
+    color?: string;
     className?: string;
     style?: CSSProperties;
     sx?: SxProp;
@@ -1129,6 +1153,8 @@ interface StackProps extends React.HTMLAttributes<HTMLElement> {
     divider?: ReactNode;
     flexWrap?: "nowrap" | "wrap" | "wrap-reverse";
     useFlexGap?: boolean;
+    flex?: string | number;
+    overflow?: string;
     component?: keyof React.JSX.IntrinsicElements;
     children: ReactNode;
     className?: string;
@@ -1277,6 +1303,16 @@ interface TabsProps {
     sx?: SxProp;
 }
 declare const Tabs: React__default.FC<TabsProps>;
+interface TabPanelProps {
+    value: string | number;
+    activeValue: string | number;
+    children: ReactNode;
+    keepMounted?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    sx?: SxProp;
+}
+declare const TabPanel: React__default.FC<TabPanelProps>;
 
 interface BreadcrumbsProps {
     separator?: ReactNode;
@@ -1527,4 +1563,27 @@ interface ZoomProps extends BaseTransitionProps {
 }
 declare const Zoom: React__default.FC<ZoomProps>;
 
-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, 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, 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, type MentionItem, Menu, MenuDivider, MenuItem, type MenuItemProps, MenuList, type MenuListProps, type MenuProps, MinExperienceIcon, NineDotMenuIcon, NotificationIcon, Paper, type PaperProps, 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, RichTextEditor, type RichTextEditorProps, RolesIcon, RufousAiIcon, RufousBirdIcon, RufousLauncherIcon, RufousLogoLoader, type RufousLogoLoaderProps, 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, 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 };
+interface ImageFieldProps {
+    /** Current image URL to display */
+    src?: string;
+    /** Alt text for the image */
+    alt?: string;
+    /** Shape of the image field */
+    variant?: "circular" | "rounded" | "square";
+    /** Predefined size or custom pixel value */
+    size?: "small" | "medium" | "large" | number;
+    /** Accepted file types (default: "image/*") */
+    accept?: string;
+    /** Called with the selected File when user picks an image */
+    onChange?: (file: File) => void;
+    /** Overlay label text (default: "Upload") */
+    overlayText?: string;
+    /** Disable interaction */
+    disabled?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    sx?: SxProp;
+}
+declare const ImageField: React__default.ForwardRefExoticComponent<ImageFieldProps & React__default.RefAttributes<HTMLDivElement>>;
+
+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, 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, 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, type MentionItem, Menu, MenuDivider, MenuItem, type MenuItemProps, MenuList, type MenuListProps, type MenuProps, MinExperienceIcon, NineDotMenuIcon, NotificationIcon, Paper, type PaperProps, 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, RichTextEditor, type RichTextEditorProps, RolesIcon, RufousAiIcon, RufousBirdIcon, RufousLauncherIcon, RufousLogoLoader, type RufousLogoLoaderProps, 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 };