@alfalab/core-components-password-input 4.1.20 → 4.2.0

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 (14) hide show
  1. package/component.d.ts +3 -32
  2. package/component.js +1 -1
  3. package/cssm/component.d.ts +3 -32
  4. package/esm/component.d.ts +3 -32
  5. package/esm/component.js +1 -1
  6. package/esm/index.css +6 -6
  7. package/index.css +6 -6
  8. package/modern/component.d.ts +3 -32
  9. package/modern/component.js +1 -1
  10. package/modern/index.css +6 -6
  11. package/package.json +3 -3
  12. package/src/component.tsx +82 -0
  13. package/src/index.module.css +23 -0
  14. package/src/index.ts +1 -0
package/component.d.ts CHANGED
@@ -11,38 +11,9 @@ type PasswordInputProps = InputProps & {
11
11
  */
12
12
  onPasswordVisibleChange?: (visible: boolean) => void;
13
13
  };
14
- declare const PasswordInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type" | "defaultValue" | "onChange" | "onClick" | "onMouseDown" | "value" | "enterKeyHint"> & {
15
- value?: string | undefined;
16
- defaultValue?: string | undefined;
17
- block?: boolean | undefined;
18
- clear?: boolean | undefined;
19
- size?: "s" | "m" | "l" | "xl" | undefined;
20
- colors?: "default" | "inverted" | undefined;
21
- error?: React.ReactNode;
22
- success?: boolean | undefined;
23
- hint?: React.ReactNode;
24
- label?: React.ReactNode;
25
- labelView?: "inner" | "outer" | undefined;
26
- type?: "number" | "text" | "tel" | "email" | "password" | "card" | "money" | undefined;
27
- wrapperRef?: React.Ref<HTMLDivElement> | undefined;
28
- leftAddons?: React.ReactNode;
29
- rightAddons?: React.ReactNode;
30
- bottomAddons?: React.ReactNode;
31
- className?: string | undefined;
32
- fieldClassName?: string | undefined;
33
- inputClassName?: string | undefined;
34
- labelClassName?: string | undefined;
35
- addonsClassName?: string | undefined;
36
- focusedClassName?: string | undefined;
37
- filledClassName?: string | undefined;
38
- onChange?: ((event: React.ChangeEvent<HTMLInputElement>, payload: {
39
- value: string;
40
- }) => void) | undefined;
41
- onClear?: ((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void) | undefined;
42
- onClick?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
43
- onMouseDown?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
44
- onMouseUp?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
45
- dataTestId?: string | undefined;
14
+ declare const PasswordInput: React.ForwardRefExoticComponent<Omit<import("packages/input/src/components/base-input").BaseInputProps, "FormControlComponent" | "colorStyles"> & {
15
+ breakpoint?: number | undefined;
16
+ defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
46
17
  } & {
47
18
  /**
48
19
  * Управление видимостью пароля (controlled)
package/component.js CHANGED
@@ -15,7 +15,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
15
15
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
16
16
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
17
17
 
18
- var styles = {"eye":"password-input__eye_j96ig","xl":"password-input__xl_j96ig","input":"password-input__input_j96ig","addons":"password-input__addons_j96ig"};
18
+ var styles = {"eye":"password-input__eye_d48n9","xl":"password-input__xl_d48n9","input":"password-input__input_d48n9","addons":"password-input__addons_d48n9"};
19
19
  require('./index.css')
20
20
 
21
21
  var PasswordInput = React.forwardRef(function (_a, ref) {
package/cssm/component.d.ts CHANGED
@@ -11,38 +11,9 @@ type PasswordInputProps = InputProps & {
11
11
  */
12
12
  onPasswordVisibleChange?: (visible: boolean) => void;
13
13
  };
14
- declare const PasswordInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type" | "defaultValue" | "onChange" | "onClick" | "onMouseDown" | "value" | "enterKeyHint"> & {
15
- value?: string | undefined;
16
- defaultValue?: string | undefined;
17
- block?: boolean | undefined;
18
- clear?: boolean | undefined;
19
- size?: "s" | "m" | "l" | "xl" | undefined;
20
- colors?: "default" | "inverted" | undefined;
21
- error?: React.ReactNode;
22
- success?: boolean | undefined;
23
- hint?: React.ReactNode;
24
- label?: React.ReactNode;
25
- labelView?: "inner" | "outer" | undefined;
26
- type?: "number" | "text" | "tel" | "email" | "password" | "card" | "money" | undefined;
27
- wrapperRef?: React.Ref<HTMLDivElement> | undefined;
28
- leftAddons?: React.ReactNode;
29
- rightAddons?: React.ReactNode;
30
- bottomAddons?: React.ReactNode;
31
- className?: string | undefined;
32
- fieldClassName?: string | undefined;
33
- inputClassName?: string | undefined;
34
- labelClassName?: string | undefined;
35
- addonsClassName?: string | undefined;
36
- focusedClassName?: string | undefined;
37
- filledClassName?: string | undefined;
38
- onChange?: ((event: React.ChangeEvent<HTMLInputElement>, payload: {
39
- value: string;
40
- }) => void) | undefined;
41
- onClear?: ((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void) | undefined;
42
- onClick?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
43
- onMouseDown?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
44
- onMouseUp?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
45
- dataTestId?: string | undefined;
14
+ declare const PasswordInput: React.ForwardRefExoticComponent<Omit<import("packages/input/src/components/base-input").BaseInputProps, "FormControlComponent" | "colorStyles"> & {
15
+ breakpoint?: number | undefined;
16
+ defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
46
17
  } & {
47
18
  /**
48
19
  * Управление видимостью пароля (controlled)
package/esm/component.d.ts CHANGED
@@ -11,38 +11,9 @@ type PasswordInputProps = InputProps & {
11
11
  */
12
12
  onPasswordVisibleChange?: (visible: boolean) => void;
13
13
  };
14
- declare const PasswordInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type" | "defaultValue" | "onChange" | "onClick" | "onMouseDown" | "value" | "enterKeyHint"> & {
15
- value?: string | undefined;
16
- defaultValue?: string | undefined;
17
- block?: boolean | undefined;
18
- clear?: boolean | undefined;
19
- size?: "s" | "m" | "l" | "xl" | undefined;
20
- colors?: "default" | "inverted" | undefined;
21
- error?: React.ReactNode;
22
- success?: boolean | undefined;
23
- hint?: React.ReactNode;
24
- label?: React.ReactNode;
25
- labelView?: "inner" | "outer" | undefined;
26
- type?: "number" | "text" | "tel" | "email" | "password" | "card" | "money" | undefined;
27
- wrapperRef?: React.Ref<HTMLDivElement> | undefined;
28
- leftAddons?: React.ReactNode;
29
- rightAddons?: React.ReactNode;
30
- bottomAddons?: React.ReactNode;
31
- className?: string | undefined;
32
- fieldClassName?: string | undefined;
33
- inputClassName?: string | undefined;
34
- labelClassName?: string | undefined;
35
- addonsClassName?: string | undefined;
36
- focusedClassName?: string | undefined;
37
- filledClassName?: string | undefined;
38
- onChange?: ((event: React.ChangeEvent<HTMLInputElement>, payload: {
39
- value: string;
40
- }) => void) | undefined;
41
- onClear?: ((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void) | undefined;
42
- onClick?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
43
- onMouseDown?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
44
- onMouseUp?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
45
- dataTestId?: string | undefined;
14
+ declare const PasswordInput: React.ForwardRefExoticComponent<Omit<import("packages/input/src/components/base-input").BaseInputProps, "FormControlComponent" | "colorStyles"> & {
15
+ breakpoint?: number | undefined;
16
+ defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
46
17
  } & {
47
18
  /**
48
19
  * Управление видимостью пароля (controlled)
package/esm/component.js CHANGED
@@ -6,7 +6,7 @@ import { Input } from '@alfalab/core-components-input/esm';
6
6
  import { EyeMIcon } from '@alfalab/icons-glyph/EyeMIcon';
7
7
  import { EyeOffMIcon } from '@alfalab/icons-glyph/EyeOffMIcon';
8
8
 
9
- var styles = {"eye":"password-input__eye_j96ig","xl":"password-input__xl_j96ig","input":"password-input__input_j96ig","addons":"password-input__addons_j96ig"};
9
+ var styles = {"eye":"password-input__eye_d48n9","xl":"password-input__xl_d48n9","input":"password-input__input_d48n9","addons":"password-input__addons_d48n9"};
10
10
  require('./index.css')
11
11
 
12
12
  var PasswordInput = forwardRef(function (_a, ref) {
package/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: l6wa6 */
1
+ /* hash: 5hynh */
2
2
  :root {
3
3
  } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
4
4
  } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -16,14 +16,14 @@
16
16
  --gap-m-neg: -16px;
17
17
  } :root {
18
18
  } :root {
19
- } .password-input__eye_j96ig:last-child {
19
+ } .password-input__eye_d48n9:last-child {
20
20
  height: 100%;
21
- } .password-input__xl_j96ig .password-input__eye_j96ig:last-child {
21
+ } .password-input__xl_d48n9 .password-input__eye_d48n9:last-child {
22
22
  margin-right: var(--gap-m-neg);
23
- } .password-input__xl_j96ig .password-input__eye_j96ig {
23
+ } .password-input__xl_d48n9 .password-input__eye_d48n9 {
24
24
  margin-left: var(--gap-2xs);
25
- } .password-input__input_j96ig::-ms-reveal {
25
+ } .password-input__input_d48n9::-ms-reveal {
26
26
  display: none;
27
- } .password-input__addons_j96ig {
27
+ } .password-input__addons_d48n9 {
28
28
  padding-right: 0;
29
29
  }
package/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: l6wa6 */
1
+ /* hash: 5hynh */
2
2
  :root {
3
3
  } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
4
4
  } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -16,14 +16,14 @@
16
16
  --gap-m-neg: -16px;
17
17
  } :root {
18
18
  } :root {
19
- } .password-input__eye_j96ig:last-child {
19
+ } .password-input__eye_d48n9:last-child {
20
20
  height: 100%;
21
- } .password-input__xl_j96ig .password-input__eye_j96ig:last-child {
21
+ } .password-input__xl_d48n9 .password-input__eye_d48n9:last-child {
22
22
  margin-right: var(--gap-m-neg);
23
- } .password-input__xl_j96ig .password-input__eye_j96ig {
23
+ } .password-input__xl_d48n9 .password-input__eye_d48n9 {
24
24
  margin-left: var(--gap-2xs);
25
- } .password-input__input_j96ig::-ms-reveal {
25
+ } .password-input__input_d48n9::-ms-reveal {
26
26
  display: none;
27
- } .password-input__addons_j96ig {
27
+ } .password-input__addons_d48n9 {
28
28
  padding-right: 0;
29
29
  }
package/modern/component.d.ts CHANGED
@@ -11,38 +11,9 @@ type PasswordInputProps = InputProps & {
11
11
  */
12
12
  onPasswordVisibleChange?: (visible: boolean) => void;
13
13
  };
14
- declare const PasswordInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type" | "defaultValue" | "onChange" | "onClick" | "onMouseDown" | "value" | "enterKeyHint"> & {
15
- value?: string | undefined;
16
- defaultValue?: string | undefined;
17
- block?: boolean | undefined;
18
- clear?: boolean | undefined;
19
- size?: "s" | "m" | "l" | "xl" | undefined;
20
- colors?: "default" | "inverted" | undefined;
21
- error?: React.ReactNode;
22
- success?: boolean | undefined;
23
- hint?: React.ReactNode;
24
- label?: React.ReactNode;
25
- labelView?: "inner" | "outer" | undefined;
26
- type?: "number" | "text" | "tel" | "email" | "password" | "card" | "money" | undefined;
27
- wrapperRef?: React.Ref<HTMLDivElement> | undefined;
28
- leftAddons?: React.ReactNode;
29
- rightAddons?: React.ReactNode;
30
- bottomAddons?: React.ReactNode;
31
- className?: string | undefined;
32
- fieldClassName?: string | undefined;
33
- inputClassName?: string | undefined;
34
- labelClassName?: string | undefined;
35
- addonsClassName?: string | undefined;
36
- focusedClassName?: string | undefined;
37
- filledClassName?: string | undefined;
38
- onChange?: ((event: React.ChangeEvent<HTMLInputElement>, payload: {
39
- value: string;
40
- }) => void) | undefined;
41
- onClear?: ((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void) | undefined;
42
- onClick?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
43
- onMouseDown?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
44
- onMouseUp?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
45
- dataTestId?: string | undefined;
14
+ declare const PasswordInput: React.ForwardRefExoticComponent<Omit<import("packages/input/src/components/base-input").BaseInputProps, "FormControlComponent" | "colorStyles"> & {
15
+ breakpoint?: number | undefined;
16
+ defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
46
17
  } & {
47
18
  /**
48
19
  * Управление видимостью пароля (controlled)
package/modern/component.js CHANGED
@@ -5,7 +5,7 @@ import { Input } from '@alfalab/core-components-input/modern';
5
5
  import { EyeMIcon } from '@alfalab/icons-glyph/EyeMIcon';
6
6
  import { EyeOffMIcon } from '@alfalab/icons-glyph/EyeOffMIcon';
7
7
 
8
- const styles = {"eye":"password-input__eye_j96ig","xl":"password-input__xl_j96ig","input":"password-input__input_j96ig","addons":"password-input__addons_j96ig"};
8
+ const styles = {"eye":"password-input__eye_d48n9","xl":"password-input__xl_d48n9","input":"password-input__input_d48n9","addons":"password-input__addons_d48n9"};
9
9
  require('./index.css')
10
10
 
11
11
  const PasswordInput = forwardRef(({ onPasswordVisibleChange, passwordVisible, disabled, colors, rightAddons, size = 's', className, ...restProps }, ref) => {
package/modern/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: l6wa6 */
1
+ /* hash: 5hynh */
2
2
  :root {
3
3
  } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
4
4
  } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -16,14 +16,14 @@
16
16
  --gap-m-neg: -16px;
17
17
  } :root {
18
18
  } :root {
19
- } .password-input__eye_j96ig:last-child {
19
+ } .password-input__eye_d48n9:last-child {
20
20
  height: 100%;
21
- } .password-input__xl_j96ig .password-input__eye_j96ig:last-child {
21
+ } .password-input__xl_d48n9 .password-input__eye_d48n9:last-child {
22
22
  margin-right: var(--gap-m-neg);
23
- } .password-input__xl_j96ig .password-input__eye_j96ig {
23
+ } .password-input__xl_d48n9 .password-input__eye_d48n9 {
24
24
  margin-left: var(--gap-2xs);
25
- } .password-input__input_j96ig::-ms-reveal {
25
+ } .password-input__input_d48n9::-ms-reveal {
26
26
  display: none;
27
- } .password-input__addons_j96ig {
27
+ } .password-input__addons_d48n9 {
28
28
  padding-right: 0;
29
29
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-password-input",
3
- "version": "4.1.20",
3
+ "version": "4.2.0",
4
4
  "description": "Input password",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -15,8 +15,8 @@
15
15
  "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
16
16
  },
17
17
  "dependencies": {
18
- "@alfalab/core-components-icon-button": "^6.1.3",
19
- "@alfalab/core-components-input": "^11.1.18",
18
+ "@alfalab/core-components-icon-button": "^6.2.0",
19
+ "@alfalab/core-components-input": "^12.0.0",
20
20
  "@alfalab/icons-glyph": "^2.108.0",
21
21
  "classnames": "^2.3.1",
22
22
  "tslib": "^2.4.0"
package/src/component.tsx ADDED
@@ -0,0 +1,82 @@
1
+ import React, { forwardRef, useCallback, useState } from 'react';
2
+ import cn from 'classnames';
3
+
4
+ import { IconButton } from '@alfalab/core-components-icon-button';
5
+ import { Input, InputProps } from '@alfalab/core-components-input';
6
+ import { EyeMIcon } from '@alfalab/icons-glyph/EyeMIcon';
7
+ import { EyeOffMIcon } from '@alfalab/icons-glyph/EyeOffMIcon';
8
+
9
+ import styles from './index.module.css';
10
+
11
+ export type PasswordInputProps = InputProps & {
12
+ /**
13
+ * Управление видимостью пароля (controlled)
14
+ */
15
+ passwordVisible?: boolean;
16
+
17
+ /**
18
+ * Коллбэк при изменении видимости пароля
19
+ */
20
+ onPasswordVisibleChange?: (visible: boolean) => void;
21
+ };
22
+
23
+ export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(
24
+ (
25
+ {
26
+ onPasswordVisibleChange,
27
+ passwordVisible,
28
+ disabled,
29
+ colors,
30
+ rightAddons,
31
+ size = 's',
32
+ className,
33
+ ...restProps
34
+ },
35
+ ref,
36
+ ) => {
37
+ const uncontrolled = passwordVisible === undefined;
38
+ const [statePasswordVisible, setStatePasswordVisible] = useState(
39
+ uncontrolled ? false : passwordVisible,
40
+ );
41
+
42
+ const handleButtonClick = useCallback(() => {
43
+ if (onPasswordVisibleChange) {
44
+ onPasswordVisibleChange(!passwordVisible);
45
+ }
46
+
47
+ if (uncontrolled) {
48
+ setStatePasswordVisible((visible) => !visible);
49
+ }
50
+ }, [passwordVisible, uncontrolled, onPasswordVisibleChange]);
51
+
52
+ const isPasswordVisible = uncontrolled ? statePasswordVisible : passwordVisible;
53
+
54
+ return (
55
+ <Input
56
+ {...restProps}
57
+ disabled={disabled}
58
+ type={isPasswordVisible ? 'text' : 'password'}
59
+ size={size}
60
+ ref={ref}
61
+ colors={colors}
62
+ className={cn(className, styles[size])}
63
+ rightAddons={
64
+ <React.Fragment>
65
+ {rightAddons}
66
+ <IconButton
67
+ className={styles.eye}
68
+ colors={colors}
69
+ view='secondary'
70
+ size='s'
71
+ icon={isPasswordVisible ? EyeMIcon : EyeOffMIcon}
72
+ onClick={handleButtonClick}
73
+ disabled={disabled}
74
+ />
75
+ </React.Fragment>
76
+ }
77
+ addonsClassName={styles.addons}
78
+ inputClassName={styles.input}
79
+ />
80
+ );
81
+ },
82
+ );
package/src/index.module.css ADDED
@@ -0,0 +1,23 @@
1
+ @import '@alfalab/core-components-themes/src/default.css';
2
+
3
+ .eye:last-child {
4
+ height: 100%;
5
+ }
6
+
7
+ .xl {
8
+ & .eye:last-child {
9
+ margin-right: var(--gap-m-neg);
10
+ }
11
+
12
+ & .eye {
13
+ margin-left: var(--gap-2xs);
14
+ }
15
+ }
16
+
17
+ .input::-ms-reveal {
18
+ display: none;
19
+ }
20
+
21
+ .addons {
22
+ padding-right: 0;
23
+ }
package/src/index.ts ADDED
@@ -0,0 +1 @@
1
+ export * from './component';