@m4l/components 8.1.0-beta.devDaniel.Icon → 8.1.0-beta.devLeury.Select

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.
Files changed (61) hide show
  1. package/@types/types.d.ts +26 -2
  2. package/components/DataGrid/classes/index.d.ts +1 -1
  3. package/components/DynamicFilter/slots/dynamicFilterSlots.d.ts +1 -1
  4. package/components/DynamicSort/slots/DynamicSortSlots.d.ts +1 -1
  5. package/components/GridLayout/classes/index.d.ts +1 -1
  6. package/components/Icon/Icon.d.ts +3 -0
  7. package/components/Icon/Icon.js +71 -54
  8. package/components/Icon/Icon.stories.d.ts +166 -0
  9. package/components/Icon/Icon.styles.js +31 -73
  10. package/components/Icon/slots/IconEnum.d.ts +1 -2
  11. package/components/Icon/slots/IconEnum.js +0 -1
  12. package/components/Icon/slots/IconSlots.d.ts +0 -3
  13. package/components/Icon/slots/IconSlots.js +1 -7
  14. package/components/Icon/types.d.ts +12 -16
  15. package/components/Label/slots/LabelSlots.d.ts +1 -1
  16. package/components/PropertyValue/classes/index.d.ts +1 -1
  17. package/components/SideBar/classes/index.d.ts +1 -1
  18. package/components/SideBar/subcomponents/ContentGroups/subcomponents/ItemListRoot/subcomponents/NavListSub/subcomponents/NavItemSub/styles.d.ts +1 -1
  19. package/components/SideBar/subcomponents/ContentGroups/subcomponents/ItemListRoot/subcomponents/NavListSub/subcomponents/NavItemSub/subcomponents/NavItemSubContent/styles.d.ts +1 -1
  20. package/components/ToastContainer/subcomponents/ToastMessage/useToastMessage.d.ts +1 -1
  21. package/components/ToastContainer/subcomponents/ToastMessage/useToastMessage.js +1 -2
  22. package/components/extended/react-resizable/Resizable/slots/ResizableSlots.d.ts +1 -1
  23. package/components/extended/react-resizable/ResizableBox/slots/ResizableBoxSlots.d.ts +1 -1
  24. package/components/hook-form/RHFAutocomplete/classes/index.d.ts +1 -1
  25. package/components/hook-form/RHFCheckbox/styles.d.ts +1 -1
  26. package/components/hook-form/RHFInputNumberSpinner/slots/RHFInputNumberSpinnerSlots.d.ts +1 -1
  27. package/components/hook-form/RHFTextField/slots/RHFTextFieldSlots.d.ts +1 -1
  28. package/components/hook-form/RHFormContext/classes/index.d.ts +1 -1
  29. package/components/mui_extended/Badge/slots/BadgeSlots.d.ts +1 -1
  30. package/components/mui_extended/Button/styles.d.ts +1 -1
  31. package/components/mui_extended/IconButton/IconButton.js +3 -4
  32. package/components/mui_extended/IconButton/slots/IconButtonSlots.d.ts +2 -2
  33. package/components/mui_extended/IconButton/types.d.ts +1 -1
  34. package/components/mui_extended/MenuActions/slots/MenuActionsSlots.d.ts +1 -1
  35. package/components/mui_extended/MenuItem/MenuItem.d.ts +11 -0
  36. package/components/mui_extended/MenuItem/MenuItem.stories.d.ts +37 -0
  37. package/components/mui_extended/MenuItem/MenuItem.styles.d.ts +2 -0
  38. package/components/mui_extended/MenuItem/constants.d.ts +8 -0
  39. package/components/mui_extended/MenuItem/index.d.ts +2 -0
  40. package/components/mui_extended/MenuItem/slots/MenuItemEnum.d.ts +5 -0
  41. package/components/mui_extended/MenuItem/slots/MenuItemSlots.d.ts +11 -0
  42. package/components/mui_extended/MenuItem/slots/index.d.ts +2 -0
  43. package/components/mui_extended/MenuItem/types.d.ts +41 -0
  44. package/components/mui_extended/Select/Select.d.ts +9 -0
  45. package/components/mui_extended/Select/Select.styles.d.ts +2 -0
  46. package/components/mui_extended/Select/constants.d.ts +8 -0
  47. package/components/mui_extended/Select/index.d.ts +2 -0
  48. package/components/mui_extended/Select/slots/SelectEnum.d.ts +6 -0
  49. package/components/mui_extended/Select/slots/SelectSlots.d.ts +12 -0
  50. package/components/mui_extended/Select/slots/index.d.ts +2 -0
  51. package/components/mui_extended/Select/stories/SelectOutlied.stories.d.ts +74 -0
  52. package/components/mui_extended/Select/stories/SelectStandar.stories.d.ts +25 -0
  53. package/components/mui_extended/Select/types.d.ts +66 -0
  54. package/components/mui_extended/Skeleton/Slots/skeletonSlots.d.ts +1 -1
  55. package/components/mui_extended/Tabs/styles.d.ts +1 -1
  56. package/components/mui_extended/Typography/slots/typographySlots.d.ts +1 -1
  57. package/package.json +1 -1
  58. package/components/Icon/stories/DefaultWithProps/Icon.defaultWithProps.stories.d.ts +0 -35
  59. package/components/Icon/stories/Preset/Icon.preset.stories.d.ts +0 -16
  60. package/components/Icon/stories/Semantic/Icon.semantic.stories.d.ts +0 -30
  61. package/components/Icon/stories/Sizes/icon.sizes.stories.d.ts +0 -40
package/@types/types.d.ts CHANGED
@@ -41,7 +41,17 @@ import type {
41
41
 
42
42
  import type { BadgeSlotsType, BadgeOwnerState } from '../components/mui_extended/Badge/types';
43
43
  import { SkeletonOwnerState, SkeletonSlotsType } from '../components/mui_extended/Skeleton/types';
44
- import { TypographyOwnerState, TypographySlotsType } from '../components/mui_extended/Typography/types';
44
+ import {
45
+ TypographyOwnerState,
46
+ TypographySlotsType,
47
+ } from '../components/mui_extended/Typography/types';
48
+
49
+ import type {
50
+ MenuItemSlotsType,
51
+ MenuItemOwnerState,
52
+ } from '../components/mui_extended/MenuItem/types';
53
+
54
+ import { SelectOwnerState, SelectSlotsType } from '../components/mui_extended/Select/types';
45
55
 
46
56
  declare module '@mui/material/styles' {
47
57
  // Define the slots in the theme
@@ -60,7 +70,9 @@ declare module '@mui/material/styles' {
60
70
  M4LTooltip: TooltipSlotsType;
61
71
  M4LIconButton: IconButtonSlotsType;
62
72
  M4LBadge: BadgeSlotsType;
73
+ M4LMenuItem: MenuItemSlotsType;
63
74
  M4LSkeleton: SkeletonSlotsType;
75
+ M4LSelect: SelectSlotsType;
64
76
  M4LTypography: TypographySlotsType;
65
77
  }
66
78
 
@@ -80,7 +92,9 @@ declare module '@mui/material/styles' {
80
92
  M4LTooltip: Partial<TooltipOwnerState>;
81
93
  M4LIconButton: Partial<IconButtonOwnerState>;
82
94
  M4LBadge: Partial<BadgeOwnerState>;
95
+ M4LMenuItem: Partial<MenuItemOwnerState>;
83
96
  M4LSkeleton: Partial<SkeletonOwnerState>;
97
+ M4LSelect: Partial<SelectOwnerState>;
84
98
  M4LTypography: Partial<TypographyOwnerState>;
85
99
  }
86
100
 
@@ -155,15 +169,25 @@ declare module '@mui/material/styles' {
155
169
  styleOverrides?: ComponentsOverrides<Theme>['M4LBadge'];
156
170
  variants?: ComponentsVariants['M4LBadge'];
157
171
  };
172
+ M4LMenuItem?: {
173
+ defaultProps?: ComponentsPropsList['M4LMenuItem'];
174
+ styleOverrides?: ComponentsOverrides<Theme>['M4LMenuItem'];
175
+ variants?: ComponentsVariants['M4LMenuItem'];
176
+ };
158
177
  M4LSkeleton?: {
159
178
  defaultProps?: ComponentsPropsList['M4LSkeleton'];
160
179
  styleOverrides?: ComponentsOverrides<Theme>['M4LSkeleton'];
161
180
  variants?: ComponentsVariants['M4LSkeleton'];
162
181
  };
182
+ M4LSelect: {
183
+ defaultProps?: ComponentsPropsList['M4LSelect'];
184
+ styleOverrides?: ComponentsOverrides<Theme>['M4LSelect'];
185
+ variants?: ComponentsVariants['M4LSelect'];
186
+ };
163
187
  M4LTypography?: {
164
188
  defaultProps?: ComponentsPropsList['M4LTypography'];
165
189
  styleOverrides?: ComponentsOverrides<Theme>['M4LTypography'];
166
190
  variants?: ComponentsVariants['M4LTypography'];
167
- }
191
+ };
168
192
  }
169
193
  }
@@ -6,8 +6,8 @@ export declare function getDataGridUtilityClass(slot: string): string;
6
6
  * TODO: Documentar
7
7
  */
8
8
  export declare const dataGridUtilityClasses: (ownerState: OwnerState) => {
9
- actions: string;
10
9
  root: string;
10
+ actions: string;
11
11
  rowsCount: string;
12
12
  rowsCountLabel: string;
13
13
  rowsCountValue: string;
@@ -57,7 +57,7 @@ export declare const PopoverMenuStyled: import('@emotion/styled').StyledComponen
57
57
  }, {}, {}>;
58
58
  export declare const PopoverMenuItemStyled: import('@emotion/styled').StyledComponent<Pick<import('@mui/material').MenuItemOwnProps & Omit<import('@mui/material').ButtonBaseOwnProps, "classes"> & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
59
59
  ref?: ((instance: HTMLLIElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLLIElement> | null | undefined;
60
- }, "children" | "sx" | "classes" | "autoFocus" | "className" | "style" | "tabIndex" | "disabled" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "divider" | "selected" | "disableGutters" | "dense">, "children" | "ref" | "value" | "color" | "content" | "translate" | "sx" | "classes" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "slot" | "spellCheck" | "style" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "disabled" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "key" | "divider" | "selected" | "disableGutters" | "dense"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').DynamicFilterOwnerState> & Record<string, unknown> & {
60
+ }, "disabled" | "sx" | "classes" | "autoFocus" | "className" | "style" | "tabIndex" | "children" | "divider" | "action" | "dense" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "selected" | "disableGutters">, "color" | "content" | "translate" | "disabled" | "sx" | "classes" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "slot" | "spellCheck" | "style" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "ref" | "divider" | "action" | "dense" | "key" | "value" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "selected" | "disableGutters"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').DynamicFilterOwnerState> & Record<string, unknown> & {
61
61
  ownerState: Partial<import('../types').DynamicFilterOwnerState> & Record<string, unknown>;
62
62
  }, {}, {}>;
63
63
  export declare const PopoverMenuItemIconStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Icon').IconProps, keyof import('../../Icon').IconProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').DynamicFilterOwnerState> & Record<string, unknown> & {
@@ -54,7 +54,7 @@ export declare const PopoverMenuStyled: import('@emotion/styled').StyledComponen
54
54
  }, {}, {}>;
55
55
  export declare const PopoverMenuItemStyled: import('@emotion/styled').StyledComponent<Pick<import('@mui/material').MenuItemOwnProps & Omit<import('@mui/material').ButtonBaseOwnProps, "classes"> & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
56
56
  ref?: ((instance: HTMLLIElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLLIElement> | null | undefined;
57
- }, "children" | "sx" | "classes" | "autoFocus" | "className" | "style" | "tabIndex" | "disabled" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "divider" | "selected" | "disableGutters" | "dense">, "children" | "ref" | "value" | "color" | "content" | "translate" | "sx" | "classes" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "slot" | "spellCheck" | "style" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "disabled" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "key" | "divider" | "selected" | "disableGutters" | "dense"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').DynamicSortOwnerState> & Record<string, unknown> & {
57
+ }, "disabled" | "sx" | "classes" | "autoFocus" | "className" | "style" | "tabIndex" | "children" | "divider" | "action" | "dense" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "selected" | "disableGutters">, "color" | "content" | "translate" | "disabled" | "sx" | "classes" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "slot" | "spellCheck" | "style" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "ref" | "divider" | "action" | "dense" | "key" | "value" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "selected" | "disableGutters"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').DynamicSortOwnerState> & Record<string, unknown> & {
58
58
  ownerState: Partial<import('../types').DynamicSortOwnerState> & Record<string, unknown>;
59
59
  }, {}, {}>;
60
60
  export declare const PopoverMenuItemIconStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Icon').IconProps, keyof import('../../Icon').IconProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').DynamicSortOwnerState> & Record<string, unknown> & {
@@ -3,5 +3,5 @@ export declare const gridLayoutClasses: GridLayoutClasses;
3
3
  /**
4
4
  * TODO: Documentar
5
5
  */
6
- export declare const useUtilityClasses: () => Record<"root" | "invisible" | "static" | "colapsed" | "resizing" | "dragging" | "gridItemRoot" | "gridItemPlaceholder" | "gridItemFreeMove" | "maximizeMe" | "maximizeOther" | "resizeHide" | "cssTransforms", string>;
6
+ export declare const useUtilityClasses: () => Record<"root" | "static" | "invisible" | "colapsed" | "resizing" | "dragging" | "gridItemRoot" | "gridItemPlaceholder" | "gridItemFreeMove" | "maximizeMe" | "maximizeOther" | "resizeHide" | "cssTransforms", string>;
7
7
  export type Classes = ReturnType<typeof useUtilityClasses>;
@@ -2,4 +2,7 @@ import { IconProps } from './types';
2
2
  /**
3
3
  * Provee de un medio por el cual se carga un icono svg en la plataforma web, aporta su versión provisional de carga en red.
4
4
  */
5
+ /**
6
+ * TODO: Documentar
7
+ */
5
8
  export declare const Icon: (props: IconProps) => import("react/jsx-runtime").JSX.Element;
@@ -1,16 +1,17 @@
1
- import { jsxs, Fragment, jsx } from "react/jsx-runtime";
2
- import { useModuleSkeleton } from "@m4l/core";
3
- import { a as getPropDataTestId } from "../../test/getNameDataTestId.js";
1
+ import { jsx, Fragment } from "react/jsx-runtime";
2
+ import { T as TEST_PROP_ID } from "../../test/constants_no_mock.js";
3
+ import { g as getNameDataTestId } from "../../test/getNameDataTestId.js";
4
4
  import { I as ICON_PREFIX } from "./constants.js";
5
5
  import { u as useComponentSize } from "../../hooks/useComponentSize/useComponentSize.js";
6
- import { T as TooltipStyled, R as RootStyled, I as IconStyled, a as IconSkeletonStyled } from "./slots/IconSlots.js";
6
+ import { T as TooltipStyled, R as RootStyled, I as IconStyled } from "./slots/IconSlots.js";
7
7
  import { I as IconSlots } from "./slots/IconEnum.js";
8
8
  const Icon = (props) => {
9
9
  const {
10
10
  src,
11
- size = "medium",
11
+ size = "small",
12
12
  rotationAngle,
13
13
  tooltipContent,
14
+ securityArea,
14
15
  color = "text.primary",
15
16
  className,
16
17
  placement = "bottom",
@@ -18,56 +19,72 @@ const Icon = (props) => {
18
19
  disabled
19
20
  } = props;
20
21
  const { currentSize } = useComponentSize(size);
21
- const isSkeleton = useModuleSkeleton();
22
- const ownerState = {
23
- iconSize: currentSize,
24
- iconColor: color,
25
- iconSrc: src,
26
- iconDisabled: disabled,
27
- iconRotationAngle: rotationAngle,
28
- isSkeleton
29
- };
30
- return /* @__PURE__ */ jsxs(Fragment, { children: [
31
- tooltipContent ? /* @__PURE__ */ jsx(
32
- TooltipStyled,
33
- {
34
- title: tooltipContent,
35
- ownerState: { ...ownerState },
36
- placement,
37
- ...getPropDataTestId(ICON_PREFIX, IconSlots.tooltip, instaceDataTestId),
38
- children: /* @__PURE__ */ jsx(
39
- RootStyled,
40
- {
41
- className,
42
- ownerState: { ...ownerState },
43
- ...getPropDataTestId(ICON_PREFIX, IconSlots.root, instaceDataTestId),
44
- children: /* @__PURE__ */ jsx(
45
- IconStyled,
46
- {
47
- ownerState: { ...ownerState },
48
- ...getPropDataTestId(ICON_PREFIX, IconSlots.icon, instaceDataTestId)
49
- }
50
- )
51
- }
22
+ return /* @__PURE__ */ jsx(Fragment, { children: tooltipContent ? /* @__PURE__ */ jsx(
23
+ TooltipStyled,
24
+ {
25
+ title: tooltipContent,
26
+ ownerState: {},
27
+ placement,
28
+ ...process.env.NODE_ENV !== "production" ? {
29
+ [TEST_PROP_ID]: getNameDataTestId(
30
+ ICON_PREFIX,
31
+ IconSlots.tooltip,
32
+ instaceDataTestId
52
33
  )
53
- }
54
- ) : /* @__PURE__ */ jsx(
55
- RootStyled,
56
- {
57
- className,
58
- ownerState: { ...ownerState },
59
- ...getPropDataTestId(ICON_PREFIX, IconSlots.root, instaceDataTestId),
60
- children: /* @__PURE__ */ jsx(
61
- IconStyled,
62
- {
63
- ownerState: { ...ownerState },
64
- ...getPropDataTestId(ICON_PREFIX, IconSlots.icon, instaceDataTestId)
65
- }
66
- )
67
- }
68
- ),
69
- isSkeleton && /* @__PURE__ */ jsx(IconSkeletonStyled, { variant: "rectangular", ownerState: { ...ownerState } })
70
- ] });
34
+ } : {},
35
+ children: /* @__PURE__ */ jsx(
36
+ RootStyled,
37
+ {
38
+ className,
39
+ ownerState: { securityArea, size: currentSize },
40
+ ...process.env.NODE_ENV !== "production" ? {
41
+ [TEST_PROP_ID]: getNameDataTestId(ICON_PREFIX, IconSlots.root, instaceDataTestId)
42
+ } : {},
43
+ children: /* @__PURE__ */ jsx(
44
+ IconStyled,
45
+ {
46
+ ownerState: {
47
+ src,
48
+ rotationAngle,
49
+ size: currentSize,
50
+ disabled,
51
+ color
52
+ },
53
+ ...process.env.NODE_ENV !== "production" ? {
54
+ [TEST_PROP_ID]: getNameDataTestId(
55
+ ICON_PREFIX,
56
+ IconSlots.icon,
57
+ instaceDataTestId
58
+ )
59
+ } : {}
60
+ }
61
+ )
62
+ }
63
+ )
64
+ }
65
+ ) : /* @__PURE__ */ jsx(
66
+ RootStyled,
67
+ {
68
+ className,
69
+ ownerState: { securityArea, size: currentSize },
70
+ ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId(ICON_PREFIX, IconSlots.root, instaceDataTestId) } : {},
71
+ children: /* @__PURE__ */ jsx(
72
+ IconStyled,
73
+ {
74
+ ownerState: {
75
+ src,
76
+ rotationAngle,
77
+ size: currentSize,
78
+ color,
79
+ disabled
80
+ },
81
+ ...process.env.NODE_ENV !== "production" ? {
82
+ [TEST_PROP_ID]: getNameDataTestId(ICON_PREFIX, IconSlots.icon, instaceDataTestId)
83
+ } : {}
84
+ }
85
+ )
86
+ }
87
+ ) });
71
88
  };
72
89
  export {
73
90
  Icon as I
@@ -0,0 +1,166 @@
1
+ import { Meta, StoryObj } from '@storybook/react/*';
2
+ import { Icon } from '.';
3
+ declare const meta: Meta<typeof Icon>;
4
+ type Story = StoryObj<typeof Icon>;
5
+ /**
6
+ * Icon in base mode
7
+ */
8
+ export declare const Base: Story;
9
+ /**
10
+ * Icon in default src mode
11
+ */
12
+ export declare const Default: Story;
13
+ /**
14
+ * icon with the prop to rotate it
15
+ */
16
+ export declare const Rotation: Story;
17
+ /**
18
+ * Icon with small size
19
+ */
20
+ export declare const Small: Story;
21
+ /**
22
+ * Icon with medium size
23
+ */
24
+ export declare const Medium: Story;
25
+ /**
26
+ * Icon with large size
27
+ */
28
+ export declare const Large: Story;
29
+ /**
30
+ * Icon with tooltip property
31
+ */
32
+ export declare const WithTooltip: Story;
33
+ /**
34
+ * Icon with security area
35
+ */
36
+ export declare const WithSecurityArea: Story;
37
+ /**
38
+ * Icon with Color 'primary.main'
39
+ */
40
+ export declare const WithColorPrimaryMain: {
41
+ parameters: {
42
+ design: {
43
+ type: string;
44
+ url: string;
45
+ }[];
46
+ };
47
+ args: {
48
+ src: string;
49
+ size: string;
50
+ color: string;
51
+ };
52
+ };
53
+ /**
54
+ * Icon with Color 'text.primary'
55
+ */
56
+ export declare const WithColorTextPrimary: {
57
+ parameters: {
58
+ design: {
59
+ type: string;
60
+ url: string;
61
+ }[];
62
+ };
63
+ args: {
64
+ src: string;
65
+ size: string;
66
+ color: string;
67
+ };
68
+ };
69
+ /**
70
+ * Icon with Color 'contrast.text'
71
+ */
72
+ export declare const WithColorContrastText: {
73
+ parameters: {
74
+ design: {
75
+ type: string;
76
+ url: string;
77
+ }[];
78
+ };
79
+ args: {
80
+ src: string;
81
+ size: string;
82
+ color: string;
83
+ };
84
+ };
85
+ /**
86
+ * Icon with Color 'error.main'
87
+ */
88
+ export declare const WithColorErrorMain: {
89
+ parameters: {
90
+ design: {
91
+ type: string;
92
+ url: string;
93
+ }[];
94
+ };
95
+ args: {
96
+ src: string;
97
+ size: string;
98
+ color: string;
99
+ };
100
+ };
101
+ /**
102
+ * Icon with Color 'warning.main'
103
+ */
104
+ export declare const WithColorWarningMain: {
105
+ parameters: {
106
+ design: {
107
+ type: string;
108
+ url: string;
109
+ }[];
110
+ };
111
+ args: {
112
+ src: string;
113
+ size: string;
114
+ color: string;
115
+ };
116
+ };
117
+ /**
118
+ * Icon with Color 'success.main'
119
+ */
120
+ export declare const WithColorSuccessMain: {
121
+ parameters: {
122
+ design: {
123
+ type: string;
124
+ url: string;
125
+ }[];
126
+ };
127
+ args: {
128
+ src: string;
129
+ size: string;
130
+ color: string;
131
+ };
132
+ };
133
+ /**
134
+ * Icon with Color 'info.main'
135
+ */
136
+ export declare const WithColorInfoMain: {
137
+ parameters: {
138
+ design: {
139
+ type: string;
140
+ url: string;
141
+ }[];
142
+ };
143
+ args: {
144
+ src: string;
145
+ size: string;
146
+ color: string;
147
+ };
148
+ };
149
+ /**
150
+ * Icon with disabled property''
151
+ */
152
+ export declare const WithDisabled: {
153
+ parameters: {
154
+ design: {
155
+ type: string;
156
+ url: string;
157
+ }[];
158
+ };
159
+ args: {
160
+ src: string;
161
+ size: string;
162
+ color: string;
163
+ disabled: boolean;
164
+ };
165
+ };
166
+ export default meta;
@@ -1,96 +1,54 @@
1
1
  import { getPropertyByString } from "@m4l/core";
2
2
  const iconStyles = {
3
3
  /**
4
- * Slot root: Contiene los estilos para el contenedor principal del ícono.
5
- * Este slot es responsable de definir el layout del ícono dentro de su contenedor,
6
- * incluyendo propiedades de flexbox para centrar su contenido, y el tamaño
7
- * dinámico basado en el dispositivo (móvil o desktop) y el tamaño del ícono
8
- * ('small' o 'medium'). También incluye animaciones como la transición
9
- * suave de transformación.
4
+ * TODO: Documentar
10
5
  */
11
6
  root: ({ theme, ownerState }) => ({
12
- display: ownerState.isSkeleton ? "none" : "flex",
7
+ display: "flex",
13
8
  justifyContent: "center",
14
9
  alignItems: "center",
15
10
  width: "fit-content",
16
11
  transition: "transform 0.5s ease-in-out",
17
- ...ownerState.iconSize === "medium" && {
18
- ...theme.generalSettings.isMobile ? {
19
- width: theme.vars.size.mobile.medium.base,
20
- height: theme.vars.size.mobile.medium.base
21
- } : {
22
- width: theme.vars.size.desktop.medium.base,
23
- height: theme.vars.size.desktop.medium.base
24
- }
25
- },
26
- ...ownerState.iconSize === "small" && {
27
- ...theme.generalSettings.isMobile ? {
28
- width: theme.vars.size.mobile.small.base,
29
- height: theme.vars.size.mobile.small.base
30
- } : {
31
- width: theme.vars.size.desktop.small.base,
32
- height: theme.vars.size.desktop.small.base
33
- }
34
- }
12
+ borderRadius: ownerState.skeleton ? "4px" : void 0,
13
+ backgroundColor: ownerState.skeleton ? `${theme.vars.palette.skeleton.default} !important` : void 0,
14
+ padding: ownerState.securityArea ? "8px" : "0px"
35
15
  }),
16
+ tooltip: () => ({}),
36
17
  /**
37
- * Slot icon: Define los estilos para el ícono que se carga dinámicamente.
38
- * Este slot gestiona cómo se carga y muestra el recurso gráfico en formato de máscara,
39
- * incluyendo su posición, repetición y ajuste de tamaño. También controla la rotación
40
- * del ícono basada en el ángulo de rotación proporcionado, y el color de fondo que
41
- * se ajusta de acuerdo con el estado de deshabilitación o no del ícono.
18
+ * TODO: Documentar
42
19
  */
43
20
  icon: ({ theme, ownerState }) => ({
44
21
  maskPosition: "center",
45
22
  maskRepeat: "no-repeat",
46
23
  maskSize: "cover",
47
24
  WebkitMaskRepeat: "no-repeat",
48
- mask: `url(${ownerState.iconSrc})`,
49
- WebkitMask: `url(${ownerState.iconSrc})`,
25
+ mask: `url(${ownerState.src})`,
26
+ WebkitMask: `url(${ownerState.src})`,
50
27
  WebkitMaskSize: "cover",
51
- ...ownerState.iconRotationAngle && {
52
- transform: `rotate(${ownerState.iconRotationAngle}deg)`
28
+ ...ownerState.rotationAngle && {
29
+ transform: `rotate(${ownerState.rotationAngle}deg)`
53
30
  },
54
- backgroundColor: !ownerState.iconDisabled ? getPropertyByString(theme.vars.palette, String(ownerState.iconColor) || "text.primary") : theme.vars.palette.text.disabled,
55
- width: "inherit",
56
- height: "inherit",
57
- variants: []
58
- }),
59
- /**
60
- * Slot iconSkeleton: Define los estilos para el esqueleto del ícono.
61
- * Se utiliza cuando el ícono aún no está completamente cargado, proporcionando
62
- * un contorno visible para indicar que la carga está en progreso. Incluye un
63
- * borde redondeado y tamaño del ícono.
64
- */
65
- iconSkeleton: ({ theme, ownerState }) => ({
66
- "&.M4lclassCssSpecificity": {
67
- borderRadius: theme.size.borderRadius.r1,
68
- ...ownerState.iconSize === "medium" && {
69
- ...theme.generalSettings.isMobile ? {
70
- width: theme.vars.size.mobile.medium.base,
71
- height: theme.vars.size.mobile.medium.base
72
- } : {
73
- width: theme.vars.size.desktop.medium.base,
74
- height: theme.vars.size.desktop.medium.base
75
- }
76
- },
77
- ...ownerState.iconSize === "small" && {
78
- ...theme.generalSettings.isMobile ? {
79
- width: theme.vars.size.mobile.small.base,
80
- height: theme.vars.size.mobile.small.base
81
- } : {
82
- width: theme.vars.size.desktop.small.base,
83
- height: theme.vars.size.desktop.small.base
84
- }
31
+ backgroundColor: !ownerState.disabled ? getPropertyByString(theme.vars.palette, ownerState.color || "text.primary") : theme.vars.palette.text.disabled,
32
+ ...ownerState.size === "medium" && {
33
+ ...theme.generalSettings.isMobile ? {
34
+ minWidth: theme.vars.size.mobile.medium.base,
35
+ minHeight: theme.vars.size.mobile.medium.action
36
+ } : {
37
+ minWidth: theme.vars.size.desktop.medium.base,
38
+ minHeight: theme.vars.size.desktop.medium.base
85
39
  }
86
- }
87
- }),
88
- /**
89
- * Slot tooltip: Define los estilos para el tooltip asociado al ícono.
90
- * Este slot permite agregar una descripción emergente cuando el ícono es
91
- * hovereado o enfocado.
92
- */
93
- tooltip: {}
40
+ },
41
+ ...ownerState.size === "small" && {
42
+ ...theme.generalSettings.isMobile ? {
43
+ minWidth: theme.vars.size.mobile.small.base,
44
+ minHeight: theme.vars.size.mobile.small.action
45
+ } : {
46
+ minWidth: theme.vars.size.desktop.small.base,
47
+ minHeight: theme.vars.size.desktop.small.base
48
+ }
49
+ },
50
+ variants: []
51
+ })
94
52
  };
95
53
  export {
96
54
  iconStyles as i
@@ -1,6 +1,5 @@
1
1
  export declare enum IconSlots {
2
2
  root = "root",
3
3
  tooltip = "tooltip",
4
- icon = "icon",
5
- iconSkeleton = "iconSkeleton"
4
+ icon = "icon"
6
5
  }
@@ -2,7 +2,6 @@ var IconSlots = /* @__PURE__ */ ((IconSlots2) => {
2
2
  IconSlots2["root"] = "root";
3
3
  IconSlots2["tooltip"] = "tooltip";
4
4
  IconSlots2["icon"] = "icon";
5
- IconSlots2["iconSkeleton"] = "iconSkeleton";
6
5
  return IconSlots2;
7
6
  })(IconSlots || {});
8
7
  export {
@@ -7,6 +7,3 @@ export declare const TooltipStyled: import('@emotion/styled').StyledComponent<Pi
7
7
  export declare const IconStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('..').IconOwnerState> & Record<string, unknown> & {
8
8
  ownerState: Partial<import('..').IconOwnerState> & Record<string, unknown>;
9
9
  }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
10
- export declare const IconSkeletonStyled: import('@emotion/styled').StyledComponent<Pick<import('../../mui_extended/Skeleton/types').SkeletonProps, keyof import('../../mui_extended/Skeleton/types').SkeletonProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('..').IconOwnerState> & Record<string, unknown> & {
11
- ownerState: Partial<import('..').IconOwnerState> & Record<string, unknown>;
12
- }, {}, {}>;