@m4l/components 8.0.1 → 8.1.0-beta.devDaniel.inputNumberSpinner

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 (41) hide show
  1. package/@types/types.d.ts +15 -10
  2. package/components/ControlIncrement/ControlIncrement.d.ts +5 -0
  3. package/components/ControlIncrement/ControlIncrement.styles.d.ts +8 -0
  4. package/components/ControlIncrement/constants.d.ts +25 -0
  5. package/components/ControlIncrement/slots/ControlIncrementEnum.d.ts +6 -0
  6. package/components/ControlIncrement/slots/ControltrolIncrementSlots.d.ts +14 -0
  7. package/components/ControlIncrement/slots/index.d.ts +2 -0
  8. package/components/ControlIncrement/stories/ControlClick/ControlIncrement.controlclick.stories.d.ts +13 -0
  9. package/components/ControlIncrement/stories/DefaultAndDisabled/ControlIncrement.defaultanddisabled.stories.d.ts +17 -0
  10. package/components/ControlIncrement/stories/Sizes/ControlIncrement.sizes.stories.d.ts +21 -0
  11. package/components/ControlIncrement/types.d.ts +56 -0
  12. package/components/HelperError/HelperError.js +2 -1
  13. package/components/HelperError/types.d.ts +4 -0
  14. package/components/InputNumberSpinner/InputNumberSpinner.d.ts +5 -0
  15. package/components/InputNumberSpinner/InputNumberSpinner.styles.d.ts +8 -0
  16. package/components/InputNumberSpinner/constants.d.ts +9 -0
  17. package/components/InputNumberSpinner/hooks/types.d.ts +13 -0
  18. package/components/InputNumberSpinner/hooks/useInputNumberSpinner.d.ts +19 -0
  19. package/components/InputNumberSpinner/index.d.ts +2 -0
  20. package/components/InputNumberSpinner/slots/InputNumberSpinnerEnum.d.ts +7 -0
  21. package/components/InputNumberSpinner/slots/InputNumberSpinnerSlots.d.ts +15 -0
  22. package/components/InputNumberSpinner/slots/index.d.ts +2 -0
  23. package/components/InputNumberSpinner/stories/Default/InputNumberSpinner.default.stories.d.ts +25 -0
  24. package/components/InputNumberSpinner/stories/Error/InputNumberSpinner.error.stories.d.ts +25 -0
  25. package/components/InputNumberSpinner/stories/Sizes/InputNumberSpinner.sizes.stories.d.ts +41 -0
  26. package/components/InputNumberSpinner/stories/Variants/InputNumberSpinner.variants.stories.d.ts +25 -0
  27. package/components/InputNumberSpinner/types.d.ts +64 -0
  28. package/components/Label/Label.js +9 -1
  29. package/components/Label/types.d.ts +4 -0
  30. package/package.json +1 -1
  31. package/components/hook-form/RHFInputNumberSpinner/RHFInputNumberSpinner.d.ts +0 -5
  32. package/components/hook-form/RHFInputNumberSpinner/RHFInputNumberSpinner.stories.d.ts +0 -21
  33. package/components/hook-form/RHFInputNumberSpinner/RHFInputNumberSpinner.styles.d.ts +0 -2
  34. package/components/hook-form/RHFInputNumberSpinner/constants.d.ts +0 -1
  35. package/components/hook-form/RHFInputNumberSpinner/index.d.ts +0 -1
  36. package/components/hook-form/RHFInputNumberSpinner/slots/RHFInputNumberSpinnerSlots.d.ts +0 -23
  37. package/components/hook-form/RHFInputNumberSpinner/slots/RHFInputNumberSpinnnerEnum.d.ts +0 -9
  38. package/components/hook-form/RHFInputNumberSpinner/slots/index.d.ts +0 -2
  39. package/components/hook-form/RHFInputNumberSpinner/subcomponents/SkeletonSpinner/index.d.ts +0 -4
  40. package/components/hook-form/RHFInputNumberSpinner/types.d.ts +0 -21
  41. package/components/hook-form/RHFInputNumberSpinner/useRHFInputNumberSpinner.d.ts +0 -13
package/@types/types.d.ts CHANGED
@@ -9,10 +9,6 @@ import {
9
9
  MenuActionsOwnerState,
10
10
  MenuActionsSlotsType,
11
11
  } from '../components/mui_extended/MenuActions/types';
12
- import {
13
- RHFInputNumberSpinnerOwnerState,
14
- RHFInputNumberSpinnerSlotsType,
15
- } from '../components/hook-form/RHFInputNumberSpinner/types';
16
12
 
17
13
  import {
18
14
  PopupViewerSlotsType,
@@ -40,7 +36,9 @@ import type {
40
36
  } from '../components/mui_extended/IconButton/types';
41
37
 
42
38
  import type { BadgeSlotsType, BadgeOwnerState } from '../components/mui_extended/Badge/types';
39
+ import { ControlIncrementOwnerState, ControlIncrementSlotsType } from '../components/ControlIncrement/types';
43
40
  import { SkeletonOwnerState, SkeletonSlotsType } from '../components/mui_extended/Skeleton/types';
41
+ import { InputNumberSpinnerOwnerState, InputNumberSpinnerSlotsType } from '../components/InputNumberSpinner/types';
44
42
  import { TypographyOwnerState, TypographySlotsType } from '../components/mui_extended/Typography/types';
45
43
 
46
44
  declare module '@mui/material/styles' {
@@ -50,7 +48,7 @@ declare module '@mui/material/styles' {
50
48
  RHFTextField: RHFTextFieldSlotsType;
51
49
  M4LDynamicSort: DynamicSortSlotsType;
52
50
  M4LMenuActions: MenuActionsSlotsType;
53
- M4LRHFInputNumberSpinner: RHFInputNumberSpinnerSlotsType;
51
+ M4LInputNumberSpinner: InputNumberSpinnerSlotsType;
54
52
  M4LPopupsViewer: PopupViewerSlotsType;
55
53
  M4LIcon: IconSlotsType;
56
54
  M4LDragResizeWindow: DragResizeWindowSlotsType;
@@ -60,6 +58,7 @@ declare module '@mui/material/styles' {
60
58
  M4LTooltip: TooltipSlotsType;
61
59
  M4LIconButton: IconButtonSlotsType;
62
60
  M4LBadge: BadgeSlotsType;
61
+ M4LControlIncrement: ControlIncrementSlotsType;
63
62
  M4LSkeleton: SkeletonSlotsType;
64
63
  M4LTypography: TypographySlotsType;
65
64
  }
@@ -70,7 +69,7 @@ declare module '@mui/material/styles' {
70
69
  RHFTextField: Partial<RHFTextFieldOwnerState>;
71
70
  M4LDynamicSort: Partial<DynamicSortOwnerState>;
72
71
  M4LMenuActions: Partial<MenuActionsOwnerState>;
73
- M4LRHFInputNumberSpinner: Partial<RHFInputNumberSpinnerOwnerState>;
72
+ M4LInputNumberSpinner: Partial<InputNumberSpinnerOwnerState>;
74
73
  M4LPopupsViewer: Partial<PopupsViewerOwnerState>;
75
74
  M4LIcon: Partial<IconOwnerState>;
76
75
  M4LDragResizeWindow: Partial<DragResizeWindowOwnerState>;
@@ -80,6 +79,7 @@ declare module '@mui/material/styles' {
80
79
  M4LTooltip: Partial<TooltipOwnerState>;
81
80
  M4LIconButton: Partial<IconButtonOwnerState>;
82
81
  M4LBadge: Partial<BadgeOwnerState>;
82
+ M4LControlIncrement: Partial<ControlIncrementOwnerState>
83
83
  M4LSkeleton: Partial<SkeletonOwnerState>;
84
84
  M4LTypography: Partial<TypographyOwnerState>;
85
85
  }
@@ -105,10 +105,10 @@ declare module '@mui/material/styles' {
105
105
  styleOverrides?: ComponentsOverrides<Theme>['M4LMenuActions'];
106
106
  variants?: ComponentsVariants['M4LMenuActions'];
107
107
  };
108
- M4LRHFInputNumberSpinner?: {
109
- defaultProps?: ComponentsPropsList['M4LRHFInputNumberSpinner'];
110
- styleOverrides?: ComponentsOverrides<Theme>['M4LRHFInputNumberSpinner'];
111
- variants?: ComponentsVariants['M4LRHFInputNumberSpinner'];
108
+ M4LInputNumberSpinner?: {
109
+ defaultProps?: ComponentsPropsList['M4LInputNumberSpinner'];
110
+ styleOverrides?: ComponentsOverrides<Theme>['M4LInputNumberSpinner'];
111
+ variants?: ComponentsVariants['M4LInputNumberSpinner'];
112
112
  };
113
113
  M4LPopupsViewer?: {
114
114
  defaultProps?: ComponentsPropsList['M4LPopupsViewer'];
@@ -155,6 +155,11 @@ declare module '@mui/material/styles' {
155
155
  styleOverrides?: ComponentsOverrides<Theme>['M4LBadge'];
156
156
  variants?: ComponentsVariants['M4LBadge'];
157
157
  };
158
+ M4LControlIncrement?: {
159
+ defaultProps?: ComponentsPropsList['M4LControlIncrement'];
160
+ styleOverrides?: ComponentsOverrides<Theme>['M4LControlIncrement'];
161
+ variants?: ComponentsVariants['M4LControlIncrement'];
162
+ };
158
163
  M4LSkeleton?: {
159
164
  defaultProps?: ComponentsPropsList['M4LSkeleton'];
160
165
  styleOverrides?: ComponentsOverrides<Theme>['M4LSkeleton'];
@@ -0,0 +1,5 @@
1
+ import { ControlIncrementProps } from './types';
2
+ /**
3
+ * Componente Para Incrementar o Decrementar
4
+ */
5
+ export declare const ControlIncrement: (props: ControlIncrementProps) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,8 @@
1
+ import { ControlIncrementStyles } from './types';
2
+ /**
3
+ * Estilos utilizados para el componente `ControlIncrement`.
4
+ * Este objeto define los estilos para los diferentes "slots" (partes) del componente,
5
+ * como el contenedor principal (`root`), los botones de incremento (`iconButtonUp`) y decremento (`iconButtonDown`),
6
+ * y el esqueleto (`controlIncrementSkeleton`).
7
+ */
8
+ export declare const controlIncrementStyles: ControlIncrementStyles;
@@ -0,0 +1,25 @@
1
+ /**
2
+ * Nombre de clase que se usa para dar identidad a los slots del componente.
3
+ */
4
+ export declare const CONTROL_INCREMENT_KEY_COMPONENT = "M4LControlIncrement";
5
+ /**
6
+ * Constante para la url del icono arrow up
7
+ */
8
+ export declare const ICON_INCREMENT = "https://s3.amazonaws.com/static.made4labs/environments/d1/frontend/components/ControlIncrement/assets/icons/chevron_up_sm.svg";
9
+ /**
10
+ * Constante para la url del icono arrow down
11
+ */
12
+ export declare const ICON_DECREMENT = "https://s3.amazonaws.com/static.made4labs/environments/d1/frontend/components/ControlIncrement/assets/icons/chevron_down_sm.svg";
13
+ /**
14
+ * Nombre de clase creado para aportar especificidad a los estilos del componente. Es usado para sobreescribir los estilos de MUI sin
15
+ * tener la necesidad de agregar valores en !important.
16
+ */
17
+ export declare const CONTROL_INCREMENT_SPECIFY = "M4lclassCssSpecificity";
18
+ /**
19
+ * Cosntante para su uso en una clase para mas especificidad y evitar el uso de important
20
+ */
21
+ export declare const BUTTON_UP = "button-up";
22
+ /**
23
+ * Cosntante para su uso en una clase para mas especificidad y evitar el uso de important
24
+ */
25
+ export declare const BUTTON_DOWN = "button-down";
@@ -0,0 +1,6 @@
1
+ export declare enum ControlIncrementSlots {
2
+ root = "root",
3
+ iconButtonUp = "iconButtonUp",
4
+ iconButtonDown = "iconButtonDown",
5
+ controlIncrementSkeleton = "controlIncrementSkeleton"
6
+ }
@@ -0,0 +1,14 @@
1
+ export declare const RootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').ControlIncrementOwnerState> & Record<string, unknown> & {
2
+ ownerState: Partial<import('../types').ControlIncrementOwnerState> & Record<string, unknown>;
3
+ }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
4
+ export declare const IconButtonUpStyles: import('@emotion/styled').StyledComponent<Pick<import('../../mui_extended/IconButton/types').IconButtonProps, keyof import('../../mui_extended/IconButton/types').IconButtonProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').ControlIncrementOwnerState> & Record<string, unknown> & {
5
+ ownerState: Partial<import('../types').ControlIncrementOwnerState> & Record<string, unknown>;
6
+ }, {}, {}>;
7
+ export declare const IconButtonDownStyles: import('@emotion/styled').StyledComponent<Pick<import('../../mui_extended/IconButton/types').IconButtonProps, keyof import('../../mui_extended/IconButton/types').IconButtonProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').ControlIncrementOwnerState> & Record<string, unknown> & {
8
+ ownerState: Partial<import('../types').ControlIncrementOwnerState> & Record<string, unknown>;
9
+ }, {}, {}>;
10
+ export declare const ControlIncrementSkeletonStyled: import('@emotion/styled').StyledComponent<Pick<import('@mui/material').SkeletonOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
11
+ ref?: ((instance: HTMLSpanElement | 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<HTMLSpanElement> | null | undefined;
12
+ }, "height" | "width" | "animation" | "sx" | "classes" | "className" | "style" | "children" | "variant">, "color" | "content" | "height" | "translate" | "width" | "animation" | "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" | "key" | "variant"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').ControlIncrementOwnerState> & Record<string, unknown> & {
13
+ ownerState: Partial<import('../types').ControlIncrementOwnerState> & Record<string, unknown>;
14
+ }, {}, {}>;
@@ -0,0 +1,2 @@
1
+ export * from './ControltrolIncrementSlots';
2
+ export * from './ControlIncrementEnum';
@@ -0,0 +1,13 @@
1
+ import { Meta, StoryObj } from '@storybook/react/*';
2
+ import { ControlIncrement } from '../../ControlIncrement';
3
+ declare const meta: Meta<typeof ControlIncrement>;
4
+ type Story = StoryObj<typeof ControlIncrement>;
5
+ /**
6
+ * ControlIncrement en modo Base
7
+ */
8
+ export declare const Base: Story;
9
+ /**
10
+ * ControlIncrement Tiene la particularidad de que cuando le des click a up o down este ejecute una funcion
11
+ */
12
+ export declare const Click: Story;
13
+ export default meta;
@@ -0,0 +1,17 @@
1
+ import { Meta, StoryObj } from '@storybook/react/*';
2
+ import { ControlIncrement } from '../../ControlIncrement';
3
+ declare const meta: Meta<typeof ControlIncrement>;
4
+ type Story = StoryObj<typeof ControlIncrement>;
5
+ /**
6
+ * ControlIncrement en modo Base
7
+ */
8
+ export declare const Base: Story;
9
+ /**
10
+ * ControlIncrement cuando esta en modo default
11
+ */
12
+ export declare const Default: Story;
13
+ /**
14
+ * ControlIncrement cuando esta en modo disabled
15
+ */
16
+ export declare const Disabled: Story;
17
+ export default meta;
@@ -0,0 +1,21 @@
1
+ import { Meta, StoryObj } from '@storybook/react/*';
2
+ import { ControlIncrement } from '../../ControlIncrement';
3
+ declare const meta: Meta<typeof ControlIncrement>;
4
+ type Story = StoryObj<typeof ControlIncrement>;
5
+ /**
6
+ * ControlIncrement en modo Base
7
+ */
8
+ export declare const Base: Story;
9
+ /**
10
+ * CrontrolIncrement cuando esta en el sizes de small
11
+ */
12
+ export declare const SizesSmall: Story;
13
+ /**
14
+ * CrontrolIncrement cuando esta en el sizes de medium
15
+ */
16
+ export declare const SizesMedium: Story;
17
+ /**
18
+ * ControlIncrement cuando esta en modo Skeleton
19
+ */
20
+ export declare const skeletonMode: Story;
21
+ export default meta;
@@ -0,0 +1,56 @@
1
+ import { PaletteColor, Theme } from '@mui/material/styles';
2
+ import { OverridesStyleRules } from '@mui/material/styles/overrides';
3
+ import { ComponentPalletColor, Sizes } from '@m4l/styles';
4
+ import { ControlIncrementSlots } from './slots/ControlIncrementEnum';
5
+ import { CONTROL_INCREMENT_KEY_COMPONENT } from './constants';
6
+ /**
7
+ * Interfaz que define las propiedades del componente `ControlIncrement`.
8
+ */
9
+ export interface ControlIncrementProps {
10
+ /**
11
+ * Tamaño del componente. Acepta valores: 'small', 'medium' o 'large'.
12
+ */
13
+ sizes?: Sizes;
14
+ /**
15
+ * Color del componente. Solo se acepta el valor 'default'.
16
+ */
17
+ color?: Extract<ComponentPalletColor, 'default'>;
18
+ /**
19
+ * Indica si el componente está deshabilitado.
20
+ */
21
+ disabled?: boolean;
22
+ /**
23
+ * Función que se ejecuta cuando se acciona el IconButton superior.
24
+ */
25
+ onChangeUp: () => void;
26
+ /**
27
+ * Función que se ejecuta cuando se acciona el IconButton inferior.
28
+ */
29
+ onChangeDown: () => void;
30
+ /**
31
+ * Clase CSS adicional para aplicar estilos personalizados al componente.
32
+ */
33
+ className?: string;
34
+ }
35
+ /**
36
+ * Interfaz que define el estado propietario de `ControlIncrement`, excluyendo algunas propiedades
37
+ * del componente base y añadiendo una propiedad de paletteColor.
38
+ */
39
+ export interface ControlIncrementOwnerState extends Omit<ControlIncrementProps, 'handleButtonChange' | 'setMouseDownDirection' | 'onChangeUp' | 'onChangeDown'> {
40
+ /**
41
+ * Color de la paleta utilizado para el componente.
42
+ */
43
+ paletteColor: PaletteColor;
44
+ }
45
+ /**
46
+ * Tipo que representa las claves de los slots del componente `ControlIncrement`.
47
+ * Este tipo se genera a partir de las claves del objeto `ControlIncrementSlots`.
48
+ */
49
+ export type ControlIncrementSlotsType = keyof typeof ControlIncrementSlots;
50
+ /**
51
+ * Define los estilos personalizados para el componente `ControlIncrement`.
52
+ *
53
+ * Este tipo se utiliza para sobrescribir las reglas de estilo (OverridesStyleRules) aplicables a los slots del componente.
54
+ * @see OverridesStyleRules
55
+ */
56
+ export type ControlIncrementStyles = Partial<OverridesStyleRules<ControlIncrementSlots, typeof CONTROL_INCREMENT_KEY_COMPONENT, Theme> | undefined> | undefined;
@@ -1,10 +1,11 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
2
  import { T as TypographyStyled } from "./slots/HelperErrorSlots.js";
3
3
  const HelperError = (props) => {
4
- const { message = "", skeletonWidth } = props;
4
+ const { message = "", skeletonWidth, className } = props;
5
5
  return /* @__PURE__ */ jsx(
6
6
  TypographyStyled,
7
7
  {
8
+ className,
8
9
  ownerState: {},
9
10
  variant: "body",
10
11
  skeletonWidth,
@@ -12,6 +12,10 @@ export interface HelperErrorProps extends Pick<TypographyProps, 'skeletonWidth'>
12
12
  * Mensaje que se visualiza en el componente HelperError.
13
13
  */
14
14
  message: string | undefined;
15
+ /**
16
+ * Propiedad que permite administrar estilos para su uso en los slots
17
+ */
18
+ className?: string;
15
19
  }
16
20
  /**
17
21
  * Representa el estado del componente HelperError, incluyendo todas las propiedades de HelperErrorProps.
@@ -0,0 +1,5 @@
1
+ import { InputNumberSpinnerProps } from './types';
2
+ /**
3
+ * Componente que permite la selección de un número a través de un input y dos botones de incremento y decremento.
4
+ */
5
+ export declare const InputNumberSpinner: (props: InputNumberSpinnerProps) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,8 @@
1
+ import { InputNumberSpinnerStyles } from './types';
2
+ /**
3
+ * Estilos utilizados para el componente `InputNumberSpinner`.
4
+ * Este objeto define los estilos para los diferentes "slots" (partes) del componente,
5
+ * como el contenedor principal (`root`), el campo de entrada (`input`), el símbolo (`simbol`),
6
+ * el controlador de botones de incremento/decremento (`controlIncrement`), y el esqueleto (`skeleton`).
7
+ */
8
+ export declare const inputNumberSpinnerStyles: InputNumberSpinnerStyles;
@@ -0,0 +1,9 @@
1
+ /**
2
+ * Nombre de clase que se usa para dar identidad a los slots del componente.
3
+ */
4
+ export declare const INPUTNUMBER_SPINNER_KEY_COMPONENT = "M4LInputNumberSpinner";
5
+ /**
6
+ * Nombre de clase creado para aportar especificidad a los estilos del componente. Es usado para sobreescribir los estilos de MUI sin
7
+ * tener la necesidad de agregar valores en !important.
8
+ */
9
+ export declare const INPUTNUMBER_SPINNER_SPECIFY = "M4lclassCssSpecificity";
@@ -0,0 +1,13 @@
1
+ import { InputNumberSpinnerProps } from '../types';
2
+ /**
3
+ * Props utilizadas para el hook `useInputNumberSpinner`, que maneja la lógica interna del componente `InputNumberSpinner`.
4
+ *
5
+ * Esta interfaz extiende parcialmente las propiedades de `InputNumberSpinnerProps`, seleccionando
6
+ * solo las propiedades relacionadas con los valores máximo y mínimo, los pasos, y el valor actual.
7
+ */
8
+ export interface UseInputNumberSpinnerProps extends Pick<InputNumberSpinnerProps, 'maxValue' | 'minValue' | 'steps' | 'value'> {
9
+ /**
10
+ * Función opcional para establecer el valor del campo externamente (como en react-hook-form)
11
+ */
12
+ onChange?: (...event: any[]) => void;
13
+ }
@@ -0,0 +1,19 @@
1
+ import { UseInputNumberSpinnerProps } from './types';
2
+ /**
3
+ * customHook que permite la validacion de el incremento y decremento del input.
4
+ * @param maxValue Permite fijar un maximo valor para el input
5
+ * @param minValue Permite fijar un minimo valor para el input
6
+ * @param steps Permite definir de cuanto aumenta el input
7
+ * @param value Valor inicial del input
8
+ * @param setValue Función opcional para establecer el valor externamente (como en react-hook-form)
9
+ * @returns
10
+ */
11
+ export declare const useInputNumberSpinner: (props: UseInputNumberSpinnerProps) => {
12
+ onChangeUp: () => void;
13
+ onChangeDown: () => void;
14
+ evalsetInternalValue: (val: number, operation?: "increase" | "decrease") => void;
15
+ handleKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
16
+ isSkeleton: boolean;
17
+ internalValue: number;
18
+ theme: import('@mui/material').Theme;
19
+ };
@@ -0,0 +1,2 @@
1
+ export * from './InputNumberSpinner';
2
+ export * from './constants';
@@ -0,0 +1,7 @@
1
+ export declare enum InputNumberSpinnerSlots {
2
+ root = "root",
3
+ input = "input",
4
+ simbol = "simbol",
5
+ controlIncrement = "controlIncrement",
6
+ skeleton = "skeleton"
7
+ }
@@ -0,0 +1,15 @@
1
+ export declare const RootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').InputNumberSpinnerOwnerState> & Record<string, unknown> & {
2
+ ownerState: Partial<import('../types').InputNumberSpinnerOwnerState> & Record<string, unknown>;
3
+ }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
4
+ export declare const InputStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').InputNumberSpinnerOwnerState> & Record<string, unknown> & {
5
+ ownerState: Partial<import('../types').InputNumberSpinnerOwnerState> & Record<string, unknown>;
6
+ }, Pick<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, keyof import('react').ClassAttributes<HTMLInputElement> | keyof import('react').InputHTMLAttributes<HTMLInputElement>>, {}>;
7
+ export declare const SimbolStyled: import('@emotion/styled').StyledComponent<Pick<import('../../mui_extended/Typography/types').TypographyProps, keyof import('../../mui_extended/Typography/types').TypographyProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').InputNumberSpinnerOwnerState> & Record<string, unknown> & {
8
+ ownerState: Partial<import('../types').InputNumberSpinnerOwnerState> & Record<string, unknown>;
9
+ }, {}, {}>;
10
+ export declare const ControlIncrementStyles: import('@emotion/styled').StyledComponent<Pick<import('../../ControlIncrement/types').ControlIncrementProps, keyof import('../../ControlIncrement/types').ControlIncrementProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').InputNumberSpinnerOwnerState> & Record<string, unknown> & {
11
+ ownerState: Partial<import('../types').InputNumberSpinnerOwnerState> & Record<string, unknown>;
12
+ }, {}, {}>;
13
+ export declare const SkeletonStyled: 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('../types').InputNumberSpinnerOwnerState> & Record<string, unknown> & {
14
+ ownerState: Partial<import('../types').InputNumberSpinnerOwnerState> & Record<string, unknown>;
15
+ }, {}, {}>;
@@ -0,0 +1,2 @@
1
+ export * from './InputNumberSpinnerEnum';
2
+ export * from './InputNumberSpinnerSlots';
@@ -0,0 +1,25 @@
1
+ import { Meta, StoryObj } from '@storybook/react';
2
+ import { InputNumberSpinner } from '../../InputNumberSpinner';
3
+ declare const meta: Meta<typeof InputNumberSpinner>;
4
+ export default meta;
5
+ type Story = StoryObj<typeof InputNumberSpinner>;
6
+ /**
7
+ * Componente InputNumberSpinner en su modo por defecto
8
+ */
9
+ export declare const Base: Story;
10
+ /**
11
+ * Componente InputNumberSpinner en su modo por defecto combinado con un icono
12
+ */
13
+ export declare const DefaultWidthIcon: Story;
14
+ /**
15
+ * Componente InputNumberSpinner en su modo por Disabled
16
+ */
17
+ export declare const Disabled: Story;
18
+ /**
19
+ * Componente InputNumberSpinner en su modo por Disabled combinado con un icono
20
+ */
21
+ export declare const DisabledWidthIcon: Story;
22
+ /**
23
+ * Componente InputNumberSpinner en su modo de carga (Skeleton)
24
+ */
25
+ export declare const WithSkeleton: Story;
@@ -0,0 +1,25 @@
1
+ import { Meta, StoryObj } from '@storybook/react';
2
+ import { InputNumberSpinner } from '../../InputNumberSpinner';
3
+ declare const meta: Meta<typeof InputNumberSpinner>;
4
+ export default meta;
5
+ type Story = StoryObj<typeof InputNumberSpinner>;
6
+ /**
7
+ * Componente InputNumberSpinner en su modo por defecto
8
+ */
9
+ export declare const Base: Story;
10
+ /**
11
+ * Componente InputNumberSpinner en su modo por Error con la variante Outlined
12
+ */
13
+ export declare const ErrorInOutlined: Story;
14
+ /**
15
+ * Componente InputNumberSpinner en su modo por Error con la variante Outlined combinado con un icono
16
+ */
17
+ export declare const ErrorInOutlinedWidthIcon: Story;
18
+ /**
19
+ * Componente InputNumberSpinner en su modo por Error con la variante Text
20
+ */
21
+ export declare const ErrorInText: Story;
22
+ /**
23
+ * Componente InputNumberSpinner en su modo por Error con la variante Text combinado con un icono
24
+ */
25
+ export declare const ErrorInTextWidthIcon: Story;
@@ -0,0 +1,41 @@
1
+ import { Meta, StoryObj } from '@storybook/react';
2
+ import { InputNumberSpinner } from '../../InputNumberSpinner';
3
+ declare const meta: Meta<typeof InputNumberSpinner>;
4
+ export default meta;
5
+ type Story = StoryObj<typeof InputNumberSpinner>;
6
+ /**
7
+ * Componente InputNumberSpinner en su modo por defecto
8
+ */
9
+ export declare const Base: Story;
10
+ /**
11
+ * Componente InputNumberSpinner en su variante Outlined
12
+ */
13
+ export declare const OutlinedInSmallSize: Story;
14
+ /**
15
+ * Componente InputNumberSpinner en su variante Outlined combinado con icono
16
+ */
17
+ export declare const OutlinedInSmallSizeWidthIcon: Story;
18
+ /**
19
+ * Componente InputNumberSpinner en su variante Outlined
20
+ */
21
+ export declare const OutlinedInMediumSize: Story;
22
+ /**
23
+ * Componente InputNumberSpinner en su variante Outlined combinado con icono
24
+ */
25
+ export declare const OutlinedInMediumSizeWidthIcon: Story;
26
+ /**
27
+ * Componente InputNumberSpinner en su variante Text
28
+ */
29
+ export declare const TextInSmallSize: Story;
30
+ /**
31
+ * Componente InputNumberSpinner en su variante Text combinado con icono
32
+ */
33
+ export declare const TextInSmallSizeWidthIcon: Story;
34
+ /**
35
+ * Componente InputNumberSpinner en su variante Text
36
+ */
37
+ export declare const TextInMediumSize: Story;
38
+ /**
39
+ * Componente InputNumberSpinner en su variante Text
40
+ */
41
+ export declare const TextInMediumSizeWidthIcon: Story;
@@ -0,0 +1,25 @@
1
+ import { Meta, StoryObj } from '@storybook/react';
2
+ import { InputNumberSpinner } from '../../InputNumberSpinner';
3
+ declare const meta: Meta<typeof InputNumberSpinner>;
4
+ export default meta;
5
+ type Story = StoryObj<typeof InputNumberSpinner>;
6
+ /**
7
+ * Componente InputNumberSpinner en su modo por defecto
8
+ */
9
+ export declare const Base: Story;
10
+ /**
11
+ * Componente InputNumberSpinner en su variante Outlined
12
+ */
13
+ export declare const Outlined: Story;
14
+ /**
15
+ * Componente InputNumberSpinner en su variante Outlined combinado con icono
16
+ */
17
+ export declare const OutlinedWidthIcon: Story;
18
+ /**
19
+ * Componente InputNumberSpinner en su variante Text
20
+ */
21
+ export declare const Text: Story;
22
+ /**
23
+ * Componente InputNumberSpinner en su variante Text combinado con icono
24
+ */
25
+ export declare const TextWidthIcon: Story;
@@ -0,0 +1,64 @@
1
+ import { ComponentPalletColor, Sizes } from '@m4l/styles';
2
+ import { PaletteColor, Theme } from '@mui/material/styles';
3
+ import { OverridesStyleRules } from '@mui/material/styles/overrides';
4
+ import { InputNumberSpinnerSlots } from './slots/InputNumberSpinnerEnum';
5
+ import { INPUTNUMBER_SPINNER_KEY_COMPONENT } from './constants';
6
+ import { InputHTMLAttributes } from 'react';
7
+ export interface InputNumberSpinnerProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'disabled' | 'number'> {
8
+ /**
9
+ * Cantidad de números por los que se incrementará o disminuirá el valor.
10
+ */
11
+ steps: number;
12
+ /**
13
+ * Tipo de dato del valor, puede ser 'pt' (puntos), '%' (porcentaje).
14
+ */
15
+ valueType?: 'pt' | '%';
16
+ /**
17
+ * Función de callback que se ejecuta cuando el valor cambia.
18
+ * @param value - El nuevo valor numérico.
19
+ */
20
+ onChange?: (value: number | null) => void;
21
+ /**
22
+ * Indica si el componente está deshabilitado.
23
+ */
24
+ disabled?: boolean;
25
+ /**
26
+ * Tamaño del componente, puede ser uno de los valores definidos en 'small' , 'medium' , 'large'.
27
+ */
28
+ sizes?: Sizes;
29
+ /**
30
+ * Valor máximo permitido para el componente.
31
+ */
32
+ maxValue: number;
33
+ /**
34
+ * Valor mínimo permitido para el componente.
35
+ */
36
+ minValue: number;
37
+ color?: Extract<ComponentPalletColor, 'primary'>;
38
+ /**
39
+ * Prop Para el testeo del componente
40
+ */
41
+ instaceDataTestId?: string;
42
+ /**
43
+ * Representa el estado de error del componente.
44
+ */
45
+ error?: boolean;
46
+ /**
47
+ * Representa el valor del componente controlado aportado desde las props.
48
+ */
49
+ value?: number;
50
+ /**
51
+ * Variante de estilos
52
+ */
53
+ variants?: 'Outlined' | 'Text';
54
+ /**
55
+ * Variante de estilos
56
+ */
57
+ src?: string;
58
+ }
59
+ export interface InputNumberSpinnerOwnerState extends Pick<InputNumberSpinnerProps, 'sizes' | 'color' | 'disabled' | 'error' | 'variants'> {
60
+ isValid?: boolean;
61
+ paletteColor: PaletteColor;
62
+ }
63
+ export type InputNumberSpinnerSlotsType = keyof typeof InputNumberSpinnerSlots;
64
+ export type InputNumberSpinnerStyles = Partial<OverridesStyleRules<InputNumberSpinnerSlots, typeof INPUTNUMBER_SPINNER_KEY_COMPONENT, Theme> | undefined> | undefined;
@@ -2,7 +2,15 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
2
2
  import { useEnvironment, useModuleSkeleton } from "@m4l/core";
3
3
  import { L as LabelRootStyled, T as TypographyStyled, a as TypographyMandatoryMessageStyled, I as IconHelperMessageStyled, S as SkeletonStyled } from "./slots/LabelSlots.js";
4
4
  const Label = (props) => {
5
- const { helperMessage, label, mandatory, mandatoryMessage, htmlFor, id, size = "medium" } = props;
5
+ const {
6
+ helperMessage,
7
+ label,
8
+ mandatory,
9
+ mandatoryMessage,
10
+ htmlFor,
11
+ id,
12
+ size = "medium"
13
+ } = props;
6
14
  const { host_static_assets, environment_assets } = useEnvironment();
7
15
  const isSkeleton = useModuleSkeleton();
8
16
  return /* @__PURE__ */ jsx(LabelRootStyled, { ownerState: {}, htmlFor, id, label: "", children: !isSkeleton ? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -17,6 +17,10 @@ export interface LabelProps {
17
17
  id?: string;
18
18
  /** Define el tamaño de la etiqueta. Puede ser 'small' o 'medium'. Por defecto es 'medium'. */
19
19
  size?: 'small' | 'medium';
20
+ /**
21
+ * Propiedad que permite administrar estilos para su uso en los slots
22
+ */
23
+ className?: string;
20
24
  }
21
25
  export type OwnerState = Pick<LabelProps, 'size'>;
22
26
  export interface LabelOwnerState extends LabelProps, OwnerState {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@m4l/components",
3
- "version": "8.0.1",
3
+ "version": "8.1.0-beta.devDaniel.inputNumberSpinner",
4
4
  "license": "UNLICENSED",
5
5
  "lint-staged": {
6
6
  "*.{js,ts,tsx}": "eslint --fix --max-warnings 0"
@@ -1,5 +0,0 @@
1
- import { RHFInputNumberSpinnerProps } from './types';
2
- /**
3
- * TODO: Documentar
4
- */
5
- export declare const RHFInputNumberSpinner: ({ steps, onChange, valueType, maxLength, name: nameRHF, }: RHFInputNumberSpinnerProps) => import("react/jsx-runtime").JSX.Element;
@@ -1,21 +0,0 @@
1
- import { Meta, StoryObj } from '@storybook/react';
2
- import { RHFInputNumberSpinner } from './RHFInputNumberSpinner';
3
- declare const meta: Meta<typeof RHFInputNumberSpinner>;
4
- export default meta;
5
- type Story = StoryObj<typeof RHFInputNumberSpinner>;
6
- /**
7
- * Base RHFInputNumberSpinner component
8
- */
9
- export declare const Base: Story;
10
- /**
11
- * Base RHFInputNumberSpinner component
12
- */
13
- export declare const Porcentaje: Story;
14
- /**
15
- * RHFInputNumberSpinner in skeleton mode
16
- */
17
- export declare const WithSkeleton: Story;
18
- /**
19
- * RHFInputNumberSpinner in error state
20
- */
21
- export declare const WithError: Story;
@@ -1,2 +0,0 @@
1
- import { RHFInputNumberSpinnerStyles } from '../RHFInputNumberSpinner/types';
2
- export declare const rhfInputNumberSpinnerStyles: RHFInputNumberSpinnerStyles;
@@ -1 +0,0 @@
1
- export declare const RHF_INPUTNUMBER_SPINNER_KEY_COMPONENT = "M4LRHFInputNumberSpinner";
@@ -1 +0,0 @@
1
- export * from './RHFInputNumberSpinner';
@@ -1,23 +0,0 @@
1
- export declare const RootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').RHFInputNumberSpinnerOwnerState> & Record<string, unknown> & {
2
- ownerState: Partial<import('../types').RHFInputNumberSpinnerOwnerState> & Record<string, unknown>;
3
- }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
4
- export declare const InputStyled: import('@emotion/styled').StyledComponent<Pick<{
5
- variant?: import('@mui/material').TextFieldVariants | undefined;
6
- } & Omit<import('@mui/material').FilledTextFieldProps | import('@mui/material').StandardTextFieldProps | import('@mui/material').OutlinedTextFieldProps, "variant">, "color" | "content" | "translate" | "margin" | "size" | "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" | "error" | "name" | "label" | "select" | "key" | "component" | "value" | "type" | "variant" | "autoComplete" | "placeholder" | "required" | "rows" | "fullWidth" | "inputProps" | "inputRef" | "SelectProps" | "multiline" | "maxRows" | "minRows" | "hiddenLabel" | "focused" | "InputProps" | "FormHelperTextProps" | "helperText" | "InputLabelProps"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').RHFInputNumberSpinnerOwnerState> & Record<string, unknown> & {
7
- ownerState: Partial<import('../types').RHFInputNumberSpinnerOwnerState> & Record<string, unknown>;
8
- }, {}, {}>;
9
- export declare const ContainInputStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').RHFInputNumberSpinnerOwnerState> & Record<string, unknown> & {
10
- ownerState: Partial<import('../types').RHFInputNumberSpinnerOwnerState> & Record<string, unknown>;
11
- }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
12
- export declare const SpanStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').RHFInputNumberSpinnerOwnerState> & Record<string, unknown> & {
13
- ownerState: Partial<import('../types').RHFInputNumberSpinnerOwnerState> & Record<string, unknown>;
14
- }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof import('react').ClassAttributes<HTMLSpanElement> | keyof import('react').HTMLAttributes<HTMLSpanElement>>, {}>;
15
- export declare const ContainButtonStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').RHFInputNumberSpinnerOwnerState> & Record<string, unknown> & {
16
- ownerState: Partial<import('../types').RHFInputNumberSpinnerOwnerState> & Record<string, unknown>;
17
- }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
18
- export declare const ButtonStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../mui_extended/Button').ButtonProps, keyof import('../../../mui_extended/Button').ButtonProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').RHFInputNumberSpinnerOwnerState> & Record<string, unknown> & {
19
- ownerState: Partial<import('../types').RHFInputNumberSpinnerOwnerState> & Record<string, unknown>;
20
- }, {}, {}>;
21
- export declare const ActionsInputSkeletonStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../mui_extended/Button').ButtonProps, keyof import('../../../mui_extended/Button').ButtonProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').RHFInputNumberSpinnerOwnerState> & Record<string, unknown> & {
22
- ownerState: Partial<import('../types').RHFInputNumberSpinnerOwnerState> & Record<string, unknown>;
23
- }, {}, {}>;
@@ -1,9 +0,0 @@
1
- export declare enum RHFInputNumberSpinnerSlots {
2
- root = "root",
3
- containerInput = "containerInput",
4
- input = "input",
5
- span = "span",
6
- containerButton = "containerButton",
7
- actionButton = "actionButton",
8
- actionsInputSkeleton = "actionsInputSkeleton"
9
- }
@@ -1,2 +0,0 @@
1
- export * from './RHFInputNumberSpinnerSlots';
2
- export * from './RHFInputNumberSpinnnerEnum';
@@ -1,4 +0,0 @@
1
- /**
2
- * TODO: Documentar
3
- */
4
- export declare const SkeletonSpinner: () => import("react/jsx-runtime").JSX.Element;
@@ -1,21 +0,0 @@
1
- import { Theme } from '@mui/material/styles';
2
- import { OverridesStyleRules } from '@mui/material/styles/overrides';
3
- import { RHFInputNumberSpinnerSlots } from './slots/RHFInputNumberSpinnnerEnum';
4
- import { RHF_INPUTNUMBER_SPINNER_KEY_COMPONENT } from './constants';
5
- import { TextFieldProps } from '@mui/material';
6
- export interface RHFInputNumberSpinnerProps extends Omit<TextFieldProps, 'variant' | 'onChange'> {
7
- steps: number;
8
- maxLength: number;
9
- valueType: 'pt' | '%';
10
- onChange?: (value: number) => void;
11
- }
12
- export interface OwnerState {
13
- /**
14
- * Variable para el cambio a error
15
- */
16
- isValid?: boolean;
17
- }
18
- export interface RHFInputNumberSpinnerOwnerState extends RHFInputNumberSpinnerProps, OwnerState {
19
- }
20
- export type RHFInputNumberSpinnerSlotsType = keyof typeof RHFInputNumberSpinnerSlots;
21
- export type RHFInputNumberSpinnerStyles = Partial<OverridesStyleRules<RHFInputNumberSpinnerSlots, typeof RHF_INPUTNUMBER_SPINNER_KEY_COMPONENT, Theme> | undefined> | undefined;
@@ -1,13 +0,0 @@
1
- import { default as React, ChangeEvent } from 'react';
2
- /**
3
- * TODO: Documentar
4
- */
5
- export declare const useRHFInputNumberSpinner: (maxLength: number, steps: number | undefined, name: string) => {
6
- control: import('react-hook-form').Control<import('react-hook-form').FieldValues, any>;
7
- value: any;
8
- handleChange: (e: ChangeEvent<HTMLInputElement>, field: any) => void;
9
- handleButtonChange: (direction?: "up" | "down") => void;
10
- mouseDownDirection: "down" | "up" | undefined;
11
- setMouseDownDirection: React.Dispatch<React.SetStateAction<"down" | "up" | undefined>>;
12
- isSkeleton: boolean;
13
- };