mimir-ui-kit 0.0.13 → 0.0.14
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/{index4.css → assets/Button.css} +1 -1
- package/dist/assets/Input.css +1 -0
- package/dist/assets/InputPassword.css +1 -0
- package/dist/assets/OtpInput.css +1 -0
- package/dist/assets/index.css +1 -0
- package/dist/components/Button/Button.d.ts +84 -0
- package/dist/components/Button/Button.js +86 -0
- package/dist/components/Button/constants.js +33 -5
- package/dist/components/Button/index.d.ts +2 -84
- package/dist/components/Button/index.js +7 -51
- package/dist/components/Button/types.d.ts +2 -2
- package/dist/components/Input/Input.d.ts +63 -0
- package/dist/components/Input/Input.js +109 -0
- package/dist/components/Input/constants.js +16 -3
- package/dist/components/Input/index.d.ts +3 -29
- package/dist/components/Input/index.js +5 -59
- package/dist/components/Input/types.d.ts +11 -0
- package/dist/components/Input/types.js +1 -0
- package/dist/components/InputPassword/InputPassword.d.ts +12 -0
- package/dist/components/InputPassword/InputPassword.js +38 -0
- package/dist/components/InputPassword/index.d.ts +2 -306
- package/dist/components/InputPassword/index.js +2 -20
- package/dist/components/InputPhoneNumber/InputPhoneNumber.d.ts +12 -0
- package/dist/components/InputPhoneNumber/InputPhoneNumber.js +38 -0
- package/dist/components/InputPhoneNumber/index.d.ts +1 -306
- package/dist/components/InputPhoneNumber/index.js +2 -26
- package/dist/components/InputPhoneNumber/utils.js +24 -7
- package/dist/components/OtpInput/OtpInput.d.ts +28 -0
- package/dist/components/OtpInput/OtpInput.js +133 -0
- package/dist/components/OtpInput/constants.d.ts +1 -0
- package/dist/components/OtpInput/constants.js +6 -3
- package/dist/components/OtpInput/index.d.ts +1 -18
- package/dist/components/OtpInput/index.js +2 -85
- package/dist/components/icons/Eye.js +31 -20
- package/dist/components/icons/index.js +2 -2
- package/dist/components/index.d.ts +4 -4
- package/dist/components/index.js +18 -18
- package/dist/hooks/index.js +4 -4
- package/dist/hooks/useMediaQuery/constants.js +9 -2
- package/dist/hooks/useMediaQuery/index.js +4 -4
- package/dist/hooks/useMediaQuery/useMediaQuery.js +13 -10
- package/dist/index-CweZ_OcN.js +65 -0
- package/dist/index.d.ts +1 -1
- package/dist/index.js +23 -25
- package/package.json +91 -91
- package/dist/assets/styles/index.css +0 -1
- package/dist/components/Button/Button.stories.d.ts +0 -67
- package/dist/components/Input/Input.stories.d.ts +0 -13
- package/dist/components/InputPassword/Input.stories.d.ts +0 -7
- package/dist/components/InputPhoneNumber/Input.stories.d.ts +0 -335
- package/dist/components/OtpInput/Input.stories.d.ts +0 -26
- package/dist/index-DIxK0V-G.js +0 -44
- package/dist/index.css +0 -1
- package/dist/index2.css +0 -1
- package/dist/index3.css +0 -1
- package/dist/utils/getLog.d.ts +0 -1
- package/dist/utils/getLog.js +0 -4
- package/dist/utils/index.d.ts +0 -1
- package/dist/utils/index.js +0 -4
@@ -1 +1 @@
|
|
1
|
-
.
|
1
|
+
._button_r2t0t_1{--button-loader-color: var(--button-color);--button-cursor: pointer;position:relative;display:inline-flex;flex-shrink:0;align-items:center;box-sizing:border-box;max-width:100%;height:var(--button-height);padding:0 var(--button-space);overflow:hidden;color:var(--button-color);font-weight:600;font-size:14px;font-family:var(--font-inter);line-height:16px;white-space:nowrap;text-decoration:none;text-overflow:ellipsis;background:var(--button-bg-color);border:none;border-radius:var(--control-radius);cursor:var(--button-cursor);transition:background-color .3s ease,border-color .15s ease,box-shadow .15s ease,color .15s ease,fill .15s ease;-webkit-appearance:none;-moz-appearance:none;appearance:none}._xs_r2t0t_29{--button-height: var(--button-height-xs);--button-font-size: var(--control-text-size-xs);--button-space: var(--control-space-xs);--button-margin-icon: 4px;--button-border-radius: var(--button-border-radius-s)}._s_r2t0t_37{--button-height: var(--button-height-s);--button-font-size: var(--control-text-size-s);--button-space: var(--control-space-s);--button-margin-icon: 4px;--button-border-radius: var(--button-border-radius-s)}._m_r2t0t_45{--button-height: var(--button-height-m);--button-font-size: var(--control-text-size-m);--button-space: var(--control-space-m);--button-margin-icon: 8px;--button-border-radius: var(--button-border-radius-m)}._l_r2t0t_53{--button-height: var(--button-height-l);--button-font-size: var(--control-text-size-l);--button-space: var(--control-space-l);--button-margin-icon: 8px;--button-border-radius: var(--button-border-radius-l)}._xl_r2t0t_61{--button-height: var(--button-height-xl);--button-space: var(--control-space-l);--button-margin-icon: 8px;--button-border-radius: var(--button-border-radius-l);font-weight:var(--font-weight-text-medium);font-size:var(--size-text-l)}._xxl_r2t0t_70{--button-height: var(--button-height-xxl);--button-space: var(--control-space-xxl);--button-border-radius: var(--button-border-radius-l);font-weight:var(--font-weight-text-medium);font-size:var(--size-text-l)}._default-button_r2t0t_78._primary-sapphire_r2t0t_78{--button-bg-color: var(--sapphire-normal);--button-color-hover: var(--light-text);--button-color-active: var(--light-text);--button-bg-color-active: var(--sapphire-active);--button-bg-color-hover: var(--sapphire-hover);--button-color: var(--light-text);--button-border: transparent}._default-button_r2t0t_78._primary-citrine_r2t0t_87{--button-bg-color: var(--citrine-normal);--button-color-hover: var(--light-text);--button-color-active: var(--light-text);--button-bg-color-active: var(--citrine-active);--button-bg-color-hover: var(--citrine-hover);--button-color: var(--light-text);--button-border: transparent}._default-button_r2t0t_78._secondary-asphalt_r2t0t_96{--button-bg-color: var(--asphalt-normal);--button-color-hover: var(--light-text);--button-color-active: var(--light-text);--button-bg-color-active: var(--asphalt-active);--button-bg-color-hover: var(--asphalt-hover);--button-color: var(--light-text);--button-border: transparent}._default-button_r2t0t_78._secondary-gray_r2t0t_105{--button-bg-color: var(--gray-normal);--button-color-hover: var(--counter-text);--button-color-active: var(--light-text);--button-bg-color-active: var(--gray-active);--button-bg-color-hover: var(--gray-hover);--button-color: var(--dark-text);--button-border: transparent}._default-button_r2t0t_78._secondary-white_r2t0t_114{--button-bg-color: var(--white-normal);--button-color-hover: var(--counter-text);--button-color-active: var(--light-text);--button-bg-color-active: var(--white-active);--button-bg-color-hover: var(--white-hover);--button-color: var(--dark-text);--button-border: transparent}._default-button_r2t0t_78._secondary-red_r2t0t_123{--button-bg-color: var(--red-normal);--button-color-hover: var(--light-text);--button-color-active: var(--light-text);--button-bg-color-active: var(--red-active);--button-bg-color-hover: var(--red-hover);--button-color: var(--light-text);--button-border: transparent}._round-button_r2t0t_133{--button-border-radius-l: 24px;--button-border-radius-m: 20px;--button-border-radius-s: 16px;--button-border-radius-xs: 12px;border-radius:var(--button-border-radius)}._round-button_r2t0t_133._black_r2t0t_140{--button-bg-color: var(--asphalt-normal);--button-bg-color-hover: var(--asphalt-hover);--button-bg-color-active: var(--sapphire-normal);--button-bg-color-focus: var(--sapphire-normal);--button-color: var(--light-text);--button-color-hover: var(--light-text);--button-color-active: var(--light-text)}._round-button_r2t0t_133._gray_r2t0t_149{--button-bg-color: var(--gray-normal);--button-bg-color-hover: var(--gray-hover);--button-bg-color-active: var(--sapphire-normal);--button-bg-color-focus: var(--sapphire-normal);--button-color: var(--asphalt-normal);--button-color-hover: var(--asphalt-hover);--button-color-active: var(--light-text)}._round-button_r2t0t_133._white_r2t0t_158{--button-bg-color: var(--white-normal);--button-bg-color-hover: var(--white-hover);--button-bg-color-active: var(--sapphire-normal);--button-bg-color-focus: var(--sapphire-normal);--button-color: var(--asphalt-normal);--button-color-hover: var(--asphalt-hover);--button-color-active: var(--light-text)}._button_r2t0t_1:hover{color:var(--button-color-hover);background:var(--button-bg-color-hover)}._button_r2t0t_1:active{color:var(--button-color-active);background:var(--button-bg-color-active)}._button_r2t0t_1:focus{box-shadow:0 0 2px var(--sapphire-normal)}._full_r2t0t_182{display:block;width:100%}._disabled_r2t0t_187{--button-cursor: not-allowed;color:var(--light-text);background-color:var(--disabled)}._disabled_r2t0t_187:hover,._disabled_r2t0t_187:active,._disabled_r2t0t_187:focus{color:var(--light-text);background-color:var(--disabled);box-shadow:none}._right-icon_r2t0t_198,._left-icon_r2t0t_199{align-self:center}._right-icon_r2t0t_198{margin-left:var(--button-margin-icon)}._left-icon_r2t0t_199{margin-right:var(--button-margin-icon)}
|
@@ -0,0 +1 @@
|
|
1
|
+
._input_1k42j_1{--button-border-radius-l: 8px;--button-border-radius-m: 6px;--button-border-radius-s: 6px;position:relative;display:block;width:100%;min-width:0;height:var(--input-height);padding-top:0;padding-inline:var(--input-padding) var(--input-padding);color:var(--dark-text);font-size:var(--input-font-size);font-family:var(--font-inter);letter-spacing:-.42px;background:none;background-color:var(--input-bg-color);border-bottom:1px solid transparent;border-radius:var(--input-border-radius);outline:none;cursor:var(--input-cursor);font-feature-settings:"zero";transition:background-color .2s ease,border-color .15s ease,box-shadow .15s ease,color .15s ease,fill .15s ease;-webkit-appearance:none;-moz-appearance:none;appearance:none}._s_1k42j_27{--input-height: var(--space-xxl);--input-font-size: var(--control-text-size-s);--input-padding: var(--space-m);--input-padding-position: var(--space-1xs);--input-border-radius: var(--button-border-radius-s);--label-font-size: var(--size-text-xs);--label-scaled: .8;--label-spacing: var(--space-1xs)}._m_1k42j_38{--input-height: var(--space-4xl);--input-font-size: var(--control-text-size-m);--input-padding: var(--space-m);--input-padding-position: var(--space-xs);--input-border-radius: var(--button-border-radius-m);--label-font-size: var(--size-text-s);--label-scaled: .6;--label-spacing: var(--space-xs)}._l_1k42j_49{--input-height: var(--space-4xxl);--input-font-size: var(--control-text-size-2xl);--input-padding: var(--space-m);--input-padding-position: var(--space-s);--input-border-radius: var(--button-border-radius-l);--label-font-size: var(--size-text-s);--label-scaled: .6;--label-spacing: var(--space-s)}._default-gray_1k42j_60{--input-bg-color: var(--black-5);--input-bg-color-active: var(--black-10);--input-bg-color-hover: var(--black-10);--input-color: var(--dark-text);--input-color-hover: var(--dark-text);--input-color-active: var(--dark-text);--input-border: transparent;--input-bottom-color-active: var(--citrine-normal);--label-color: var(--black-60)}._default-white_1k42j_72{--input-bg-color: var(--white);--input-bg-color-hover: var(--black-60);--input-bg-color-active: var(--white);--input-color: var(--dark-text);--input-color-hover: var(--dark-text);--input-color-active: var(--dark-text);--input-border: transparent;--input-bottom-color-active: var(--citrine-normal);--label-color: var(--dark-text)}._default-white_1k42j_72::-moz-placeholder{color:var(--input-color)}._default-white_1k42j_72::placeholder{color:var(--input-color)}._default-white_1k42j_72:hover::-moz-placeholder{color:var(--input-color)}._default-white_1k42j_72:hover::placeholder{color:var(--input-color)}._success_1k42j_90{--input-bg-color: var(--success-normal);--input-bg-color-hover: var(--success-bg-hover);--input-bg-color-active: var(--success-bg-active);--input-color: var(--dark-text);--input-color-hover: var(--dark-text);--input-color-active: var(--dark-text);--input-border: transparent;--input-bottom-color-active: var(--success-normal);--label-color: var(--black-60)}._success_1k42j_90::-moz-placeholder{color:var(--input-color)}._success_1k42j_90::placeholder{color:var(--input-color)}._success_1k42j_90:hover::-moz-placeholder{color:var(--input-color)}._success_1k42j_90:hover::placeholder{color:var(--input-color)}._alarm_1k42j_108{--input-bg-color: var(--alarm-normal);--input-bg-color-hover: var(--alarm-bg-hover);--input-bg-color-active: var(--alarm-bg-active);--input-color: var(--dark-text);--input-color-hover: var(--dark-text);--input-color-active: var(--dark-text);--input-border: transparent;--input-bottom-color-active: var(--alarm-normal);--label-color: var(--black-60)}._alarm_1k42j_108::-moz-placeholder{color:var(--input-color)}._alarm_1k42j_108::placeholder{color:var(--input-color)}._alarm_1k42j_108:hover::-moz-placeholder{color:var(--input-color)}._alarm_1k42j_108:hover::placeholder{color:var(--input-color)}._error_1k42j_126{--input-bg-color: var(--error-normal);--input-bg-color-hover: var(--error-bg-hover);--input-bg-color-active: var(--error-bg-active);--input-color: var(--dark-text);--input-color-hover: var(--dark-text);--input-color-active: var(--dark-text);--input-border: transparent;--input-bottom-color-active: var(--error-normal);--label-color: var(--black-60)}._error_1k42j_126::-moz-placeholder{color:var(--input-color)}._error_1k42j_126::placeholder{color:var(--input-color)}._error_1k42j_126:hover::-moz-placeholder{color:var(--input-color)}._error_1k42j_126:hover::placeholder{color:var(--input-color)}._input_1k42j_1:hover{color:var(--input-color-hover);background:var(--input-bg-color-hover)}._input_1k42j_1:focus{color:var(--input-color-active);background-color:var(--input-bg-color-active);border-bottom:1px solid var(--input-bottom-color-active)}._disabled_1k42j_155{--input-cursor: not-allowed;color:var(--light-text);background-color:var(--black-20)}._disabled_1k42j_155:hover,._disabled_1k42j_155:active,._disabled_1k42j_155:focus{color:var(--light-text);background-color:var(--black-20);border:none;box-shadow:none}._disabled_1k42j_155::-moz-placeholder{color:var(--light-text)}._disabled_1k42j_155::placeholder{color:var(--light-text)}._disabled_1k42j_155:hover::-moz-placeholder{color:var(--light-text)}._disabled_1k42j_155:hover::placeholder{color:var(--light-text)}._input-wrapper_1k42j_173{position:relative}._has-label_1k42j_177{padding-top:var(--input-padding-position)}._label_1k42j_181{position:absolute;top:calc(var(--input-height) / 2 - var(--input-font-size) / 2);left:var(--space-m);z-index:1;display:block;color:var(--label-color);font-size:var(--input-font-size);white-space:nowrap;background-color:var(--color-background);transform-origin:left center;cursor:var(--input-cursor);transition:transform .15s ease-out,color .15s ease-out;pointer-events:none}._label_1k42j_181._active-label_1k42j_196{transform:scale(var(--label-scaled)) translateY(calc((var(--input-height) / 2 - var(--label-font-size) / 2) * -1))}
|
@@ -0,0 +1 @@
|
|
1
|
+
._input_1eiiw_1{padding-right:var(--space-3xl)}._wrapper_1eiiw_5{position:relative;display:flex;align-items:center;border-radius:8px}._wrapper_1eiiw_5 svg{color:inherit;fill:inherit}._button-wrapper_1eiiw_16{position:absolute;top:0;right:0;z-index:2;display:flex;width:44px;height:100%;max-height:var(--button-height-xxl)}._button_1eiiw_16{flex:1;align-self:center;background-color:transparent;border-radius:8px}
|
@@ -0,0 +1 @@
|
|
1
|
+
._otp_f763c_1{display:flex;width:100%;-moz-column-gap:var(--space-xs);column-gap:var(--space-xs)}._input-wrapper_f763c_7{flex:0 0 64px;padding:0}._input_f763c_7{text-align:center}._separator_f763c_16{display:block;flex:0 0 54px;align-self:center;height:1px;background-color:var(--black-100)}
|
@@ -0,0 +1 @@
|
|
1
|
+
@font-face{font-weight:400;font-family:Montserrat;font-style:normal;src:url(./fonts/585d10920d676fcd.woff2) format("woff2"),url(./fonts/3b9f59412b17ff93.woff) format("woff")}@font-face{font-weight:700;font-family:Montserrat;font-style:normal;src:url(./fonts/f4d681a788c6d497.woff2) format("woff2"),url(./fonts/43b748f250df0f08.woff) format("woff")}@font-face{font-weight:300;font-family:Montserrat;font-style:normal;src:url(./fonts/ee3db32f0aadef5d.woff2) format("woff2"),url(./fonts/1a738bfdbc1e4d9d.woff) format("woff")}@font-face{font-weight:500;font-family:Montserrat;font-style:normal;src:url(./fonts/e51d2feb30084bc2.woff2) format("woff2"),url(./fonts/badaa6d1837432de.woff) format("woff")}@font-face{font-weight:600;font-family:Montserrat;font-style:normal;src:url(./fonts/63611593e008a77c.woff2) format("woff2"),url(./fonts/3cdd7fabbe89d2b9.woff) format("woff")}@font-face{font-weight:400;font-family:Inter;font-style:normal;src:url(./fonts/d080ae18fd04e52c.woff2) format("woff2");font-variant-numeric:slashed-zero}@font-face{font-weight:700;font-family:Inter;font-style:normal;src:url(./fonts/11d5bc9f0cad36d1.woff2) format("woff2");font-variant-numeric:slashed-zero}@font-face{font-weight:500;font-family:Inter;font-style:normal;src:url(./fonts/242d04bef81519ae.woff2) format("woff2");font-variant-numeric:slashed-zero}@font-face{font-weight:600;font-family:Inter;font-style:normal;src:url(./fonts/cac2ba46e8c8adc9.woff2) format("woff2");font-variant-numeric:slashed-zero}@supports (font-variation-settings: normal){:root{font-family:InterVariable,sans-serif}}:root{font-feature-settings:"zero"}*{margin:0;padding:0;border:0;outline:none}*,:after,:before{box-sizing:border-box}:active,:focus{outline:0}a,a:visited,a:hover{text-decoration:none}a:active,a:focus{outline:0}aside,footer,header,nav{display:block}body,html{width:100%;height:100%;font-size:100%;line-height:1}button,input,textarea,select{font-family:inherit}input::-ms-clear{display:none}button{cursor:pointer}button::-moz-focus-inner{padding:0;border:0}ul li{list-style:none}img{vertical-align:top}h1,h2,h3,h4,h5,h6{font-weight:inherit;font-size:inherit}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:var(--color-typo-brand);-webkit-transition:background-color 5000s ease-in-out 0s;transition:background-color 5000s ease-in-out 0s}:root{--sapphire-100: #2355d7;--sapphire-90: #3564df;--sapphire-80: #4b75e2;--sapphire-70: #6186e6;--sapphire-60: #7797e9;--sapphire-50: #8da7ed;--sapphire-40: #9fb7f4;--sapphire-30: #b9caf4;--sapphire-20: #cfdaf7;--sapphire-10: #e5ebfb;--citrine-100: #ff7900;--citrine-90: #ff861a;--citrine-80: #ff9433;--citrine-70: #ffa14d;--citrine-60: #ffaf66;--citrine-50: #ffbc80;--citrine-40: #ffc999;--citrine-30: #ffd7b2;--citrine-20: #ffe4cc;--citrine-10: #fff2e5;--magenta-100: #bc2251;--magenta-90: #d8275d;--magenta-80: #dc3d6d;--magenta-70: #e15781;--magenta-60: #e46c91;--magenta-50: #e986a4;--magenta-40: #ed9cb4;--magenta-30: #f2b6c8;--magenta-20: #f6cbd8;--magenta-10: #fae5ec;--black-100: #000;--black-95: #0d0d0d;--black-90: #1a1a1a;--black-85: #262626;--black-80: #333;--black-75: #404040;--black-70: #4d4d4d;--black-65: #595959;--black-60: #666;--black-55: #737373;--black-50: #808080;--black-45: #8c8c8c;--black-40: #999;--black-35: #a6a6a6;--black-30: #b3b3b3;--black-25: #bfbfbf;--black-20: #ccc;--black-15: #d9d9d9;--black-10: #e6e6e6;--black-5: #f2f2f2;--white: #fff;--dark-blue: #0a38af;--blue-40: #a7bbef;--blue-20: #d3ddf7;--green: #1b770c;--red-tag: #f01406;--success-normal: #23b413;--success-bg-hover: #d5fbe2;--success-bg-active: #ebfdf1;--alarm-normal: #fdc023;--alarm-bg-hover: #fff0c7;--alarm-bg-active: #fff6de;--error-normal: #e64646;--error-bg-hover: #fadbdb;--error-bg-active: #fbe3e3;--disabled: #b3b3b3;--light-text: var(--white);--dark-text: var(--black-100);--sapphire-normal: var(--sapphire-100);--sapphire-hover: #1b41a3;--sapphire-active: #122c70;--citrine-normal: var(--citrine-100);--citrine-hover: #e56d00;--citrine-active: #cc6100;--asphalt-border: var(--black-30);--asphalt-normal: var(--black-80);--asphalt-hover: var(--black-90);--asphalt-active: var(--black-100);--gray-normal: var(--black-5);--gray-hover: var(--black-10);--gray-active: var(--black-80);--white-normal: var(--white);--white-hover: var(--black-5);--white-transparent: rgb(255 255 255 / 40%);--white-active: var(--black-80);--red-normal: var(--error-normal);--red-hover: #e33030;--red-active: #dc1e1e;--green-normal: var(--green);--green-hover: #16610a;--green-active: #114a08;--counter-text: #ffa066;--button-height-xs: 24px;--button-height-s: 32px;--button-height-m: 40px;--button-height-l: 48px;--button-height-xl: 56px;--button-height-xxl: 64px;--control-default: var(--sapphire-20);--control-hover: var(--sapphire-40);--control-selected: var(--sapphire-100);--control-disabled: var(--black-10);--font-inter: "Inter", sans-serif;--font-montserrat: "Montserrat", sans-serif;--font-weight-text-regular: 400;--font-weight-text-medium: 500;--font-weight-text-semibold: 600;--font-weight-text-bold: 700;--font-weight-text-extrabold: 800;--font-weight-text-black: 900;--size-text-xs2: 8px;--size-text-xs: 10px;--size-text-s: 12px;--size-text-m: 14px;--size-text-l: 16px;--size-text-xl: 20px;--size-text-xl2: 24px;--size-text-2xl: 28px;--size-text-xl3: 32px;--size-text-xl4: 48px;--size-text-xl5: 72px;--size-text-xl6: 96px;--line-height-text-2xs: 1em;--line-height-text-xs: 1.1em;--line-height-text-s: 1.2em;--line-height-text-m: 1.3em;--line-height-text-l: 1.4em;--line-height-text-xl: 1.5em;--control-radius: 6px;--control-radius-l: 24px;--control-input-radius: 12px;--control-border-width: 1px;--control-height-xl: 60px;--control-height-xxl: 60px;--control-height-l: var(--space-4xl);--control-height-m: var(--space-3xl);--control-height-s: var(--space-2xl);--control-height-xs: var(--space-xl);--control-box-size-s: var(--space-s);--control-box-size-m: var(--space-m);--control-box-size-l: var(--space-l);--control-space-xxl: var(--space-xl);--control-space-l: var(--space-xl);--control-space-m: var(--space-l);--control-space-s: var(--space-m);--control-space-xs: var(--space-s);--control-text-size-2xl: var(--size-text-xl);--control-text-size-xl: var(--size-text-xl3);--control-text-size-l: var(--size-text-l);--control-text-size-m: var(--size-text-m);--control-text-size-s: var(--size-text-s);--control-text-size-xs: var(--size-text-xs);--space-3xs: 2px;--space-2xs: 4px;--space-1xs: 6px;--space-xs: 8px;--space-s: 12px;--space-m: 16px;--space-l: 20px;--space-xl: 24px;--space-2xl: 32px;--space-xxl: 40px;--space-3xl: 44px;--space-4xl: 48px;--space-4xxl: 64px;--space-5xl: 72px;--space-6xl: 96px;--box-shadow-active: 0 0 2px var(--sapphire-normal)}@supports (font-variation-settings: normal){:root{font-family:Inter,sans-serif}}:root{font-feature-settings:"zero";font-variant-numeric:slashed-zero}body{font-family:Inter,sans-serif;font-variant-numeric:slashed-zero;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
|
@@ -0,0 +1,84 @@
|
|
1
|
+
import { ComponentProps, ReactNode } from 'react';
|
2
|
+
import { TButtonDefaultFormProps, TButtonRoundFormProps } from './types';
|
3
|
+
|
4
|
+
export type TProps = (TButtonDefaultFormProps | TButtonRoundFormProps) & ComponentProps<'button'> & {
|
5
|
+
/**
|
6
|
+
* Класс, применяемый к корневому элементу кнопки.
|
7
|
+
*/
|
8
|
+
className?: string;
|
9
|
+
/**
|
10
|
+
* Флаг, указывающий, отключена ли кнопка.
|
11
|
+
*/
|
12
|
+
disabled?: boolean;
|
13
|
+
/**
|
14
|
+
* Иконка справа.
|
15
|
+
*/
|
16
|
+
rightIcon?: ReactNode;
|
17
|
+
/**
|
18
|
+
* Иконка слева.
|
19
|
+
*/
|
20
|
+
leftIcon?: ReactNode;
|
21
|
+
/**
|
22
|
+
* Флаг, указывающий, что кнопка занимает все доступное пространство.
|
23
|
+
*/
|
24
|
+
full?: boolean;
|
25
|
+
/**
|
26
|
+
* Идентификатор формы, к которой привязана кнопка.
|
27
|
+
*/
|
28
|
+
formId?: string;
|
29
|
+
};
|
30
|
+
/**
|
31
|
+
* Компонент кнопки, который можно настраивать с различными темами и размерами.
|
32
|
+
|
33
|
+
*/
|
34
|
+
export declare const Button: import('react').ForwardRefExoticComponent<(Omit<TButtonDefaultFormProps & import('react').ClassAttributes<HTMLButtonElement> & import('react').ButtonHTMLAttributes<HTMLButtonElement> & {
|
35
|
+
/**
|
36
|
+
* Класс, применяемый к корневому элементу кнопки.
|
37
|
+
*/
|
38
|
+
className?: string;
|
39
|
+
/**
|
40
|
+
* Флаг, указывающий, отключена ли кнопка.
|
41
|
+
*/
|
42
|
+
disabled?: boolean;
|
43
|
+
/**
|
44
|
+
* Иконка справа.
|
45
|
+
*/
|
46
|
+
rightIcon?: ReactNode;
|
47
|
+
/**
|
48
|
+
* Иконка слева.
|
49
|
+
*/
|
50
|
+
leftIcon?: ReactNode;
|
51
|
+
/**
|
52
|
+
* Флаг, указывающий, что кнопка занимает все доступное пространство.
|
53
|
+
*/
|
54
|
+
full?: boolean;
|
55
|
+
/**
|
56
|
+
* Идентификатор формы, к которой привязана кнопка.
|
57
|
+
*/
|
58
|
+
formId?: string;
|
59
|
+
}, "ref"> | Omit<TButtonRoundFormProps & import('react').ClassAttributes<HTMLButtonElement> & import('react').ButtonHTMLAttributes<HTMLButtonElement> & {
|
60
|
+
/**
|
61
|
+
* Класс, применяемый к корневому элементу кнопки.
|
62
|
+
*/
|
63
|
+
className?: string;
|
64
|
+
/**
|
65
|
+
* Флаг, указывающий, отключена ли кнопка.
|
66
|
+
*/
|
67
|
+
disabled?: boolean;
|
68
|
+
/**
|
69
|
+
* Иконка справа.
|
70
|
+
*/
|
71
|
+
rightIcon?: ReactNode;
|
72
|
+
/**
|
73
|
+
* Иконка слева.
|
74
|
+
*/
|
75
|
+
leftIcon?: ReactNode;
|
76
|
+
/**
|
77
|
+
* Флаг, указывающий, что кнопка занимает все доступное пространство.
|
78
|
+
*/
|
79
|
+
full?: boolean;
|
80
|
+
/**
|
81
|
+
* Идентификатор формы, к которой привязана кнопка.
|
82
|
+
*/
|
83
|
+
formId?: string;
|
84
|
+
}, "ref">) & import('react').RefAttributes<HTMLButtonElement>>;
|
@@ -0,0 +1,86 @@
|
|
1
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
2
|
+
import { forwardRef } from "react";
|
3
|
+
import { c as classNames } from "../../index-CweZ_OcN.js";
|
4
|
+
import { EButtonVariantDefault, EButtonForm } from "./constants.js";
|
5
|
+
import '../../assets/Button.css';const button = "_button_r2t0t_1";
|
6
|
+
const xs = "_xs_r2t0t_29";
|
7
|
+
const s = "_s_r2t0t_37";
|
8
|
+
const m = "_m_r2t0t_45";
|
9
|
+
const l = "_l_r2t0t_53";
|
10
|
+
const xl = "_xl_r2t0t_61";
|
11
|
+
const xxl = "_xxl_r2t0t_70";
|
12
|
+
const black = "_black_r2t0t_140";
|
13
|
+
const gray = "_gray_r2t0t_149";
|
14
|
+
const white = "_white_r2t0t_158";
|
15
|
+
const full = "_full_r2t0t_182";
|
16
|
+
const disabled = "_disabled_r2t0t_187";
|
17
|
+
const cls = {
|
18
|
+
button,
|
19
|
+
xs,
|
20
|
+
s,
|
21
|
+
m,
|
22
|
+
l,
|
23
|
+
xl,
|
24
|
+
xxl,
|
25
|
+
"default-button": "_default-button_r2t0t_78",
|
26
|
+
"primary-sapphire": "_primary-sapphire_r2t0t_78",
|
27
|
+
"primary-citrine": "_primary-citrine_r2t0t_87",
|
28
|
+
"secondary-asphalt": "_secondary-asphalt_r2t0t_96",
|
29
|
+
"secondary-gray": "_secondary-gray_r2t0t_105",
|
30
|
+
"secondary-white": "_secondary-white_r2t0t_114",
|
31
|
+
"secondary-red": "_secondary-red_r2t0t_123",
|
32
|
+
"round-button": "_round-button_r2t0t_133",
|
33
|
+
black,
|
34
|
+
gray,
|
35
|
+
white,
|
36
|
+
full,
|
37
|
+
disabled,
|
38
|
+
"right-icon": "_right-icon_r2t0t_198",
|
39
|
+
"left-icon": "_left-icon_r2t0t_199"
|
40
|
+
};
|
41
|
+
const Button = forwardRef(
|
42
|
+
(props, ref) => {
|
43
|
+
const {
|
44
|
+
size = "m",
|
45
|
+
variant = EButtonVariantDefault.PrimarySapphire,
|
46
|
+
form = EButtonForm.DefaultButton,
|
47
|
+
full: full2,
|
48
|
+
children,
|
49
|
+
className,
|
50
|
+
formId,
|
51
|
+
rightIcon,
|
52
|
+
leftIcon,
|
53
|
+
disabled: disabled2,
|
54
|
+
...otherProps
|
55
|
+
} = props;
|
56
|
+
const mods = {
|
57
|
+
[cls.full]: full2,
|
58
|
+
[cls.disabled]: disabled2,
|
59
|
+
[cls[variant ?? ""]]: !disabled2
|
60
|
+
};
|
61
|
+
const buttonClassNames = classNames(cls.button, mods, [
|
62
|
+
cls[form ?? ""],
|
63
|
+
cls[size],
|
64
|
+
className
|
65
|
+
]);
|
66
|
+
return /* @__PURE__ */ jsxs(
|
67
|
+
"button",
|
68
|
+
{
|
69
|
+
form: formId,
|
70
|
+
...otherProps,
|
71
|
+
disabled: disabled2,
|
72
|
+
ref,
|
73
|
+
className: buttonClassNames,
|
74
|
+
children: [
|
75
|
+
leftIcon && /* @__PURE__ */ jsx("span", { className: cls["left-icon"], children: leftIcon }),
|
76
|
+
children,
|
77
|
+
rightIcon && /* @__PURE__ */ jsx("span", { className: cls["right-icon"], children: rightIcon })
|
78
|
+
]
|
79
|
+
}
|
80
|
+
);
|
81
|
+
}
|
82
|
+
);
|
83
|
+
Button.displayName = "Button";
|
84
|
+
export {
|
85
|
+
Button
|
86
|
+
};
|
@@ -1,7 +1,35 @@
|
|
1
|
-
var
|
1
|
+
var EButtonVariantDefault = /* @__PURE__ */ ((EButtonVariantDefault2) => {
|
2
|
+
EButtonVariantDefault2["PrimarySapphire"] = "primary-sapphire";
|
3
|
+
EButtonVariantDefault2["PrimaryCitrine"] = "primary-citrine";
|
4
|
+
EButtonVariantDefault2["SecondaryAsphalt"] = "secondary-asphalt";
|
5
|
+
EButtonVariantDefault2["SecondaryGray"] = "secondary-gray";
|
6
|
+
EButtonVariantDefault2["SecondaryWhite"] = "secondary-white";
|
7
|
+
EButtonVariantDefault2["SecondaryRed"] = "secondary-red";
|
8
|
+
return EButtonVariantDefault2;
|
9
|
+
})(EButtonVariantDefault || {});
|
10
|
+
var EButtonVariantRound = /* @__PURE__ */ ((EButtonVariantRound2) => {
|
11
|
+
EButtonVariantRound2["Black"] = "black";
|
12
|
+
EButtonVariantRound2["Gray"] = "gray";
|
13
|
+
EButtonVariantRound2["White"] = "white";
|
14
|
+
return EButtonVariantRound2;
|
15
|
+
})(EButtonVariantRound || {});
|
16
|
+
var EButtonSize = /* @__PURE__ */ ((EButtonSize2) => {
|
17
|
+
EButtonSize2["XS"] = "xs";
|
18
|
+
EButtonSize2["S"] = "s";
|
19
|
+
EButtonSize2["M"] = "m";
|
20
|
+
EButtonSize2["L"] = "l";
|
21
|
+
EButtonSize2["XL"] = "xl";
|
22
|
+
EButtonSize2["XXL"] = "xxl";
|
23
|
+
return EButtonSize2;
|
24
|
+
})(EButtonSize || {});
|
25
|
+
var EButtonForm = /* @__PURE__ */ ((EButtonForm2) => {
|
26
|
+
EButtonForm2["DefaultButton"] = "default-button";
|
27
|
+
EButtonForm2["RoundButton"] = "round-button";
|
28
|
+
return EButtonForm2;
|
29
|
+
})(EButtonForm || {});
|
2
30
|
export {
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
31
|
+
EButtonForm,
|
32
|
+
EButtonSize,
|
33
|
+
EButtonVariantDefault,
|
34
|
+
EButtonVariantRound
|
7
35
|
};
|
@@ -1,84 +1,2 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
export type TProps = (TButtonDefaultFormProps | TButtonRoundFormProps) & ComponentProps<'button'> & {
|
5
|
-
/**
|
6
|
-
* Класс, применяемый к корневому элементу кнопки.
|
7
|
-
*/
|
8
|
-
className?: string;
|
9
|
-
/**
|
10
|
-
* Флаг, указывающий, отключена ли кнопка.
|
11
|
-
*/
|
12
|
-
disabled?: boolean;
|
13
|
-
/**
|
14
|
-
* Иконка справа.
|
15
|
-
*/
|
16
|
-
rightIcon?: ReactNode;
|
17
|
-
/**
|
18
|
-
* Иконка слева.
|
19
|
-
*/
|
20
|
-
leftIcon?: ReactNode;
|
21
|
-
/**
|
22
|
-
* Флаг, указывающий, что кнопка занимает все доступное пространство.
|
23
|
-
*/
|
24
|
-
full?: boolean;
|
25
|
-
/**
|
26
|
-
* Идентификатор формы, к которой привязана кнопка.
|
27
|
-
*/
|
28
|
-
formId?: string;
|
29
|
-
};
|
30
|
-
/**
|
31
|
-
* Компонент кнопки, который можно настраивать с различными темами и размерами.
|
32
|
-
|
33
|
-
*/
|
34
|
-
export declare const Button: import('react').ForwardRefExoticComponent<(Omit<TButtonDefaultFormProps & import('react').ClassAttributes<HTMLButtonElement> & import('react').ButtonHTMLAttributes<HTMLButtonElement> & {
|
35
|
-
/**
|
36
|
-
* Класс, применяемый к корневому элементу кнопки.
|
37
|
-
*/
|
38
|
-
className?: string;
|
39
|
-
/**
|
40
|
-
* Флаг, указывающий, отключена ли кнопка.
|
41
|
-
*/
|
42
|
-
disabled?: boolean;
|
43
|
-
/**
|
44
|
-
* Иконка справа.
|
45
|
-
*/
|
46
|
-
rightIcon?: ReactNode;
|
47
|
-
/**
|
48
|
-
* Иконка слева.
|
49
|
-
*/
|
50
|
-
leftIcon?: ReactNode;
|
51
|
-
/**
|
52
|
-
* Флаг, указывающий, что кнопка занимает все доступное пространство.
|
53
|
-
*/
|
54
|
-
full?: boolean;
|
55
|
-
/**
|
56
|
-
* Идентификатор формы, к которой привязана кнопка.
|
57
|
-
*/
|
58
|
-
formId?: string;
|
59
|
-
}, "ref"> | Omit<TButtonRoundFormProps & import('react').ClassAttributes<HTMLButtonElement> & import('react').ButtonHTMLAttributes<HTMLButtonElement> & {
|
60
|
-
/**
|
61
|
-
* Класс, применяемый к корневому элементу кнопки.
|
62
|
-
*/
|
63
|
-
className?: string;
|
64
|
-
/**
|
65
|
-
* Флаг, указывающий, отключена ли кнопка.
|
66
|
-
*/
|
67
|
-
disabled?: boolean;
|
68
|
-
/**
|
69
|
-
* Иконка справа.
|
70
|
-
*/
|
71
|
-
rightIcon?: ReactNode;
|
72
|
-
/**
|
73
|
-
* Иконка слева.
|
74
|
-
*/
|
75
|
-
leftIcon?: ReactNode;
|
76
|
-
/**
|
77
|
-
* Флаг, указывающий, что кнопка занимает все доступное пространство.
|
78
|
-
*/
|
79
|
-
full?: boolean;
|
80
|
-
/**
|
81
|
-
* Идентификатор формы, к которой привязана кнопка.
|
82
|
-
*/
|
83
|
-
formId?: string;
|
84
|
-
}, "ref">) & import('react').RefAttributes<HTMLButtonElement>>;
|
1
|
+
export { Button, type TProps as TButtonProps } from './Button';
|
2
|
+
export { EButtonForm, EButtonSize, EButtonVariantDefault, EButtonVariantRound } from './constants';
|
@@ -1,53 +1,9 @@
|
|
1
|
-
import {
|
2
|
-
import {
|
3
|
-
import { c as h } from "../../index-DIxK0V-G.js";
|
4
|
-
import { EButtonVariantDefault as b, EButtonForm as g } from "./constants.js";
|
5
|
-
import '../../index4.css';const w = "_button_1yux6_1", N = "_xs_1yux6_29", B = "_s_1yux6_37", k = "_m_1yux6_45", I = "_l_1yux6_53", j = "_xl_1yux6_61", D = "_xxl_1yux6_70", E = "_black_1yux6_140", P = "_gray_1yux6_149", v = "_white_1yux6_158", z = "_full_1yux6_182", C = "_disabled_1yux6_186", t = {
|
6
|
-
button: w,
|
7
|
-
xs: N,
|
8
|
-
s: B,
|
9
|
-
m: k,
|
10
|
-
l: I,
|
11
|
-
xl: j,
|
12
|
-
xxl: D,
|
13
|
-
"default-button": "_default-button_1yux6_78",
|
14
|
-
"primary-sapphire": "_primary-sapphire_1yux6_78",
|
15
|
-
"primary-citrine": "_primary-citrine_1yux6_87",
|
16
|
-
"secondary-asphalt": "_secondary-asphalt_1yux6_96",
|
17
|
-
"secondary-gray": "_secondary-gray_1yux6_105",
|
18
|
-
"secondary-white": "_secondary-white_1yux6_114",
|
19
|
-
"secondary-red": "_secondary-red_1yux6_123",
|
20
|
-
"round-button": "_round-button_1yux6_133",
|
21
|
-
black: E,
|
22
|
-
gray: P,
|
23
|
-
white: v,
|
24
|
-
full: z,
|
25
|
-
disabled: C,
|
26
|
-
"right-icon": "_right-icon_1yux6_197",
|
27
|
-
"left-icon": "_left-icon_1yux6_198"
|
28
|
-
}, F = p((n, r) => {
|
29
|
-
const {
|
30
|
-
size: l = "m",
|
31
|
-
variant: e = b.PrimarySapphire,
|
32
|
-
form: c = g.DefaultButton,
|
33
|
-
full: u,
|
34
|
-
children: i,
|
35
|
-
className: y,
|
36
|
-
formId: x,
|
37
|
-
rightIcon: s,
|
38
|
-
leftIcon: _,
|
39
|
-
...o
|
40
|
-
} = n, d = {
|
41
|
-
[t.full]: u,
|
42
|
-
[t.disabled]: o.disabled
|
43
|
-
}, m = [o.disabled ? "" : t[e ?? ""], t[c ?? ""], t[l], y];
|
44
|
-
return /* @__PURE__ */ f("button", { form: x, ...o, ref: r, className: h(t.button, d, m), children: [
|
45
|
-
_ && /* @__PURE__ */ a("span", { className: t["left-icon"], children: _ }),
|
46
|
-
i,
|
47
|
-
s && /* @__PURE__ */ a("span", { className: t["right-icon"], children: s })
|
48
|
-
] });
|
49
|
-
});
|
50
|
-
F.displayName = "Button";
|
1
|
+
import { Button } from "./Button.js";
|
2
|
+
import { EButtonForm, EButtonSize, EButtonVariantDefault, EButtonVariantRound } from "./constants.js";
|
51
3
|
export {
|
52
|
-
|
4
|
+
Button,
|
5
|
+
EButtonForm,
|
6
|
+
EButtonSize,
|
7
|
+
EButtonVariantDefault,
|
8
|
+
EButtonVariantRound
|
53
9
|
};
|
@@ -2,12 +2,12 @@ import { EButtonSize, EButtonVariantDefault, EButtonVariantRound, EButtonForm }
|
|
2
2
|
|
3
3
|
type TButtonRoundFormSize = Exclude<EButtonSize, 'xxl'> & Exclude<EButtonSize, 'xl'>;
|
4
4
|
export type TButtonDefaultFormProps = {
|
5
|
-
form
|
5
|
+
form?: EButtonForm.DefaultButton;
|
6
6
|
variant?: EButtonVariantDefault | `${EButtonVariantDefault}`;
|
7
7
|
size?: EButtonSize | `${EButtonSize}`;
|
8
8
|
};
|
9
9
|
export type TButtonRoundFormProps = {
|
10
|
-
form
|
10
|
+
form?: EButtonForm.RoundButton;
|
11
11
|
variant?: EButtonVariantRound | `${EButtonVariantRound}`;
|
12
12
|
size?: TButtonRoundFormSize | `${TButtonRoundFormSize}`;
|
13
13
|
};
|
@@ -0,0 +1,63 @@
|
|
1
|
+
import { ReactNode } from 'react';
|
2
|
+
import { TInputProps, TSize, TVariant } from './types';
|
3
|
+
|
4
|
+
export type TProps = TInputProps & {
|
5
|
+
/**
|
6
|
+
* Размер ввода.
|
7
|
+
*/
|
8
|
+
size?: TSize;
|
9
|
+
/**
|
10
|
+
* `Варинты отображения ввода. Может быть 'alert', 'success', 'default', 'default-gray', 'default-white'.`
|
11
|
+
*/
|
12
|
+
variant?: TVariant;
|
13
|
+
/**
|
14
|
+
* Дополнительный класс.
|
15
|
+
*/
|
16
|
+
className?: string;
|
17
|
+
/**
|
18
|
+
* Дополнительный класс для обертки поля ввода.
|
19
|
+
*/
|
20
|
+
wrapperClassName?: string;
|
21
|
+
/**
|
22
|
+
* Текстовое описание поля ввода.
|
23
|
+
*/
|
24
|
+
label?: ReactNode;
|
25
|
+
/**
|
26
|
+
* Автоматически фокусировать ввод при монтировании.
|
27
|
+
*/
|
28
|
+
autofocus?: boolean;
|
29
|
+
/**
|
30
|
+
* Сделать ввод только для чтения.
|
31
|
+
*/
|
32
|
+
readonly?: boolean;
|
33
|
+
};
|
34
|
+
export declare const Input: import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<TInputProps & {
|
35
|
+
/**
|
36
|
+
* Размер ввода.
|
37
|
+
*/
|
38
|
+
size?: TSize;
|
39
|
+
/**
|
40
|
+
* `Варинты отображения ввода. Может быть 'alert', 'success', 'default', 'default-gray', 'default-white'.`
|
41
|
+
*/
|
42
|
+
variant?: TVariant;
|
43
|
+
/**
|
44
|
+
* Дополнительный класс.
|
45
|
+
*/
|
46
|
+
className?: string;
|
47
|
+
/**
|
48
|
+
* Дополнительный класс для обертки поля ввода.
|
49
|
+
*/
|
50
|
+
wrapperClassName?: string;
|
51
|
+
/**
|
52
|
+
* Текстовое описание поля ввода.
|
53
|
+
*/
|
54
|
+
label?: ReactNode;
|
55
|
+
/**
|
56
|
+
* Автоматически фокусировать ввод при монтировании.
|
57
|
+
*/
|
58
|
+
autofocus?: boolean;
|
59
|
+
/**
|
60
|
+
* Сделать ввод только для чтения.
|
61
|
+
*/
|
62
|
+
readonly?: boolean;
|
63
|
+
} & import('react').RefAttributes<HTMLInputElement>>>;
|
@@ -0,0 +1,109 @@
|
|
1
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
2
|
+
import { memo, forwardRef, useState, useEffect } from "react";
|
3
|
+
import { c as classNames } from "../../index-CweZ_OcN.js";
|
4
|
+
import { EInputVariant } from "./constants.js";
|
5
|
+
import '../../assets/Input.css';const input = "_input_1k42j_1";
|
6
|
+
const s = "_s_1k42j_27";
|
7
|
+
const m = "_m_1k42j_38";
|
8
|
+
const l = "_l_1k42j_49";
|
9
|
+
const success = "_success_1k42j_90";
|
10
|
+
const alarm = "_alarm_1k42j_108";
|
11
|
+
const error = "_error_1k42j_126";
|
12
|
+
const disabled = "_disabled_1k42j_155";
|
13
|
+
const label = "_label_1k42j_181";
|
14
|
+
const cls = {
|
15
|
+
input,
|
16
|
+
s,
|
17
|
+
m,
|
18
|
+
l,
|
19
|
+
"default-gray": "_default-gray_1k42j_60",
|
20
|
+
"default-white": "_default-white_1k42j_72",
|
21
|
+
success,
|
22
|
+
alarm,
|
23
|
+
error,
|
24
|
+
disabled,
|
25
|
+
"input-wrapper": "_input-wrapper_1k42j_173",
|
26
|
+
"has-label": "_has-label_1k42j_177",
|
27
|
+
label,
|
28
|
+
"active-label": "_active-label_1k42j_196"
|
29
|
+
};
|
30
|
+
const Input = memo(
|
31
|
+
forwardRef(
|
32
|
+
(props, ref) => {
|
33
|
+
const {
|
34
|
+
value,
|
35
|
+
className,
|
36
|
+
wrapperClassName,
|
37
|
+
variant = EInputVariant.DefaultGray,
|
38
|
+
type = "text",
|
39
|
+
autofocus,
|
40
|
+
readonly,
|
41
|
+
onFocus,
|
42
|
+
onBlur,
|
43
|
+
label: label2,
|
44
|
+
disabled: disabled2,
|
45
|
+
size = "m",
|
46
|
+
...otherProps
|
47
|
+
} = props;
|
48
|
+
const [isFocused, setIsFocused] = useState(autofocus);
|
49
|
+
useEffect(() => {
|
50
|
+
if (autofocus) {
|
51
|
+
setIsFocused(true);
|
52
|
+
}
|
53
|
+
}, [autofocus]);
|
54
|
+
const handleBlur = (event) => {
|
55
|
+
const currentValue = event.currentTarget.value;
|
56
|
+
onBlur == null ? void 0 : onBlur(event);
|
57
|
+
if (currentValue) {
|
58
|
+
return;
|
59
|
+
}
|
60
|
+
setIsFocused(false);
|
61
|
+
};
|
62
|
+
const handleFocus = (event) => {
|
63
|
+
if (readonly) {
|
64
|
+
return;
|
65
|
+
}
|
66
|
+
setIsFocused(true);
|
67
|
+
onFocus == null ? void 0 : onFocus(event);
|
68
|
+
};
|
69
|
+
const mods = {
|
70
|
+
[cls.readonly]: disabled2 || readonly,
|
71
|
+
[cls.focused]: isFocused,
|
72
|
+
[cls.disabled]: disabled2 || readonly,
|
73
|
+
[cls["has-label"]]: !!label2
|
74
|
+
};
|
75
|
+
const labelClassNames = classNames(
|
76
|
+
cls.label,
|
77
|
+
{
|
78
|
+
[cls["active-label"]]: isFocused
|
79
|
+
},
|
80
|
+
className,
|
81
|
+
cls[size]
|
82
|
+
);
|
83
|
+
const inputClassNames = classNames(cls.input, mods, className, [
|
84
|
+
cls[variant],
|
85
|
+
cls[size]
|
86
|
+
]);
|
87
|
+
return /* @__PURE__ */ jsxs("div", { className: classNames(cls["input-wrapper"], wrapperClassName), children: [
|
88
|
+
label2 && /* @__PURE__ */ jsx("label", { className: labelClassNames, children: label2 }),
|
89
|
+
/* @__PURE__ */ jsx(
|
90
|
+
"input",
|
91
|
+
{
|
92
|
+
...otherProps,
|
93
|
+
ref,
|
94
|
+
type,
|
95
|
+
className: inputClassNames,
|
96
|
+
onFocus: handleFocus,
|
97
|
+
onBlur: handleBlur,
|
98
|
+
readOnly: readonly,
|
99
|
+
value
|
100
|
+
}
|
101
|
+
)
|
102
|
+
] });
|
103
|
+
}
|
104
|
+
)
|
105
|
+
);
|
106
|
+
Input.displayName = "Input";
|
107
|
+
export {
|
108
|
+
Input
|
109
|
+
};
|
@@ -1,5 +1,18 @@
|
|
1
|
-
var
|
1
|
+
var EInputVariant = /* @__PURE__ */ ((EInputVariant2) => {
|
2
|
+
EInputVariant2["Alarm"] = "alarm";
|
3
|
+
EInputVariant2["Success"] = "success";
|
4
|
+
EInputVariant2["Error"] = "error";
|
5
|
+
EInputVariant2["DefaultGray"] = "default-gray";
|
6
|
+
EInputVariant2["DefaultWhite"] = "default-white";
|
7
|
+
return EInputVariant2;
|
8
|
+
})(EInputVariant || {});
|
9
|
+
var EInputSize = /* @__PURE__ */ ((EInputSize2) => {
|
10
|
+
EInputSize2["S"] = "s";
|
11
|
+
EInputSize2["M"] = "m";
|
12
|
+
EInputSize2["L"] = "l";
|
13
|
+
return EInputSize2;
|
14
|
+
})(EInputSize || {});
|
2
15
|
export {
|
3
|
-
|
4
|
-
|
16
|
+
EInputSize,
|
17
|
+
EInputVariant
|
5
18
|
};
|