@rufous/ui 0.1.82 → 0.1.84
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/main.cjs +198 -69
- package/dist/main.css +88 -0
- package/dist/main.d.cts +29 -1
- package/dist/main.d.ts +29 -1
- package/dist/main.js +526 -399
- package/package.json +3 -2
package/dist/main.css
CHANGED
|
@@ -5717,6 +5717,94 @@ pre {
|
|
|
5717
5717
|
width: max-content;
|
|
5718
5718
|
}
|
|
5719
5719
|
|
|
5720
|
+
/* lib/styles/image-field.css */
|
|
5721
|
+
.rf-image-field {
|
|
5722
|
+
position: relative;
|
|
5723
|
+
display: inline-flex;
|
|
5724
|
+
align-items: center;
|
|
5725
|
+
justify-content: center;
|
|
5726
|
+
overflow: hidden;
|
|
5727
|
+
cursor: pointer;
|
|
5728
|
+
background-color: var(--border-color);
|
|
5729
|
+
flex-shrink: 0;
|
|
5730
|
+
}
|
|
5731
|
+
.rf-image-field--circular {
|
|
5732
|
+
border-radius: 50%;
|
|
5733
|
+
}
|
|
5734
|
+
.rf-image-field--rounded {
|
|
5735
|
+
border-radius: 12px;
|
|
5736
|
+
}
|
|
5737
|
+
.rf-image-field--square {
|
|
5738
|
+
border-radius: 0;
|
|
5739
|
+
}
|
|
5740
|
+
.rf-image-field--small {
|
|
5741
|
+
width: 64px;
|
|
5742
|
+
height: 64px;
|
|
5743
|
+
}
|
|
5744
|
+
.rf-image-field--medium {
|
|
5745
|
+
width: 96px;
|
|
5746
|
+
height: 96px;
|
|
5747
|
+
}
|
|
5748
|
+
.rf-image-field--large {
|
|
5749
|
+
width: 128px;
|
|
5750
|
+
height: 128px;
|
|
5751
|
+
}
|
|
5752
|
+
.rf-image-field__img {
|
|
5753
|
+
width: 100%;
|
|
5754
|
+
height: 100%;
|
|
5755
|
+
object-fit: cover;
|
|
5756
|
+
display: block;
|
|
5757
|
+
transition: filter 0.25s ease;
|
|
5758
|
+
}
|
|
5759
|
+
.rf-image-field__placeholder {
|
|
5760
|
+
display: flex;
|
|
5761
|
+
align-items: center;
|
|
5762
|
+
justify-content: center;
|
|
5763
|
+
width: 100%;
|
|
5764
|
+
height: 100%;
|
|
5765
|
+
color: var(--text-secondary);
|
|
5766
|
+
transition: filter 0.25s ease;
|
|
5767
|
+
}
|
|
5768
|
+
.rf-image-field__overlay {
|
|
5769
|
+
position: absolute;
|
|
5770
|
+
inset: 0;
|
|
5771
|
+
display: flex;
|
|
5772
|
+
align-items: center;
|
|
5773
|
+
justify-content: center;
|
|
5774
|
+
flex-direction: column;
|
|
5775
|
+
gap: 4px;
|
|
5776
|
+
background-color: rgba(0, 0, 0, 0.5);
|
|
5777
|
+
opacity: 0;
|
|
5778
|
+
transition: opacity 0.25s ease;
|
|
5779
|
+
pointer-events: none;
|
|
5780
|
+
}
|
|
5781
|
+
.rf-image-field:hover .rf-image-field__overlay {
|
|
5782
|
+
opacity: 1;
|
|
5783
|
+
}
|
|
5784
|
+
.rf-image-field:hover .rf-image-field__img {
|
|
5785
|
+
filter: blur(2px);
|
|
5786
|
+
}
|
|
5787
|
+
.rf-image-field__overlay-text {
|
|
5788
|
+
color: #ffffff;
|
|
5789
|
+
font-size: 0.6875rem;
|
|
5790
|
+
font-weight: 500;
|
|
5791
|
+
font-family: var(--font-family);
|
|
5792
|
+
text-align: center;
|
|
5793
|
+
line-height: 1.2;
|
|
5794
|
+
}
|
|
5795
|
+
.rf-image-field__input {
|
|
5796
|
+
display: none;
|
|
5797
|
+
}
|
|
5798
|
+
.rf-image-field:focus-visible {
|
|
5799
|
+
outline: 2px solid var(--primary-color);
|
|
5800
|
+
outline-offset: 2px;
|
|
5801
|
+
}
|
|
5802
|
+
.rf-image-field--disabled {
|
|
5803
|
+
opacity: 0.5;
|
|
5804
|
+
cursor: not-allowed;
|
|
5805
|
+
pointer-events: none;
|
|
5806
|
+
}
|
|
5807
|
+
|
|
5720
5808
|
/* lib/styles/text-field.css */
|
|
5721
5809
|
.rf-text-field {
|
|
5722
5810
|
--tf-primary-color: #f15b24;
|
package/dist/main.d.cts
CHANGED
|
@@ -383,6 +383,11 @@ interface QualificationsIconProps extends React.SVGProps<SVGSVGElement> {
|
|
|
383
383
|
}
|
|
384
384
|
declare const QualificationsIcon: React.FC<QualificationsIconProps>;
|
|
385
385
|
|
|
386
|
+
interface CameraIconProps extends React.SVGProps<SVGSVGElement> {
|
|
387
|
+
color?: string;
|
|
388
|
+
}
|
|
389
|
+
declare const CameraIcon: React.FC<CameraIconProps>;
|
|
390
|
+
|
|
386
391
|
type SxProp = {
|
|
387
392
|
[key: string]: string | number | SxProp | undefined | null;
|
|
388
393
|
};
|
|
@@ -1527,4 +1532,27 @@ interface ZoomProps extends BaseTransitionProps {
|
|
|
1527
1532
|
}
|
|
1528
1533
|
declare const Zoom: React__default.FC<ZoomProps>;
|
|
1529
1534
|
|
|
1530
|
-
|
|
1535
|
+
interface ImageFieldProps {
|
|
1536
|
+
/** Current image URL to display */
|
|
1537
|
+
src?: string;
|
|
1538
|
+
/** Alt text for the image */
|
|
1539
|
+
alt?: string;
|
|
1540
|
+
/** Shape of the image field */
|
|
1541
|
+
variant?: "circular" | "rounded" | "square";
|
|
1542
|
+
/** Predefined size or custom pixel value */
|
|
1543
|
+
size?: "small" | "medium" | "large" | number;
|
|
1544
|
+
/** Accepted file types (default: "image/*") */
|
|
1545
|
+
accept?: string;
|
|
1546
|
+
/** Called with the selected File when user picks an image */
|
|
1547
|
+
onChange?: (file: File) => void;
|
|
1548
|
+
/** Overlay label text (default: "Upload") */
|
|
1549
|
+
overlayText?: string;
|
|
1550
|
+
/** Disable interaction */
|
|
1551
|
+
disabled?: boolean;
|
|
1552
|
+
className?: string;
|
|
1553
|
+
style?: CSSProperties;
|
|
1554
|
+
sx?: SxProp;
|
|
1555
|
+
}
|
|
1556
|
+
declare const ImageField: React__default.ForwardRefExoticComponent<ImageFieldProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
1557
|
+
|
|
1558
|
+
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, 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
CHANGED
|
@@ -383,6 +383,11 @@ interface QualificationsIconProps extends React.SVGProps<SVGSVGElement> {
|
|
|
383
383
|
}
|
|
384
384
|
declare const QualificationsIcon: React.FC<QualificationsIconProps>;
|
|
385
385
|
|
|
386
|
+
interface CameraIconProps extends React.SVGProps<SVGSVGElement> {
|
|
387
|
+
color?: string;
|
|
388
|
+
}
|
|
389
|
+
declare const CameraIcon: React.FC<CameraIconProps>;
|
|
390
|
+
|
|
386
391
|
type SxProp = {
|
|
387
392
|
[key: string]: string | number | SxProp | undefined | null;
|
|
388
393
|
};
|
|
@@ -1527,4 +1532,27 @@ interface ZoomProps extends BaseTransitionProps {
|
|
|
1527
1532
|
}
|
|
1528
1533
|
declare const Zoom: React__default.FC<ZoomProps>;
|
|
1529
1534
|
|
|
1530
|
-
|
|
1535
|
+
interface ImageFieldProps {
|
|
1536
|
+
/** Current image URL to display */
|
|
1537
|
+
src?: string;
|
|
1538
|
+
/** Alt text for the image */
|
|
1539
|
+
alt?: string;
|
|
1540
|
+
/** Shape of the image field */
|
|
1541
|
+
variant?: "circular" | "rounded" | "square";
|
|
1542
|
+
/** Predefined size or custom pixel value */
|
|
1543
|
+
size?: "small" | "medium" | "large" | number;
|
|
1544
|
+
/** Accepted file types (default: "image/*") */
|
|
1545
|
+
accept?: string;
|
|
1546
|
+
/** Called with the selected File when user picks an image */
|
|
1547
|
+
onChange?: (file: File) => void;
|
|
1548
|
+
/** Overlay label text (default: "Upload") */
|
|
1549
|
+
overlayText?: string;
|
|
1550
|
+
/** Disable interaction */
|
|
1551
|
+
disabled?: boolean;
|
|
1552
|
+
className?: string;
|
|
1553
|
+
style?: CSSProperties;
|
|
1554
|
+
sx?: SxProp;
|
|
1555
|
+
}
|
|
1556
|
+
declare const ImageField: React__default.ForwardRefExoticComponent<ImageFieldProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
1557
|
+
|
|
1558
|
+
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, 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 };
|