mimir-ui-kit 1.1.2 → 1.1.4
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/assets/Button.css +1 -1
- package/dist/assets/Input.css +1 -1
- package/dist/assets/RadioGroup.css +1 -1
- package/dist/assets/index.css +1 -1
- package/dist/components/Button/Button.d.ts +60 -21
- package/dist/components/Button/Button.js +30 -25
- package/dist/components/Button/types.d.ts +14 -0
- package/dist/components/Input/Input.js +14 -14
- package/dist/components/OtpInput/OtpInput.d.ts +1 -1
- package/dist/components/OtpInput/OtpInput.js +12 -84
- package/dist/components/OtpInput/hooks.d.ts +20 -0
- package/dist/components/OtpInput/hooks.js +139 -0
- package/package.json +5 -1
package/dist/assets/Button.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._button_1hqwa_2{--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:var(--font-weight-text-semibold);font-size:var(--button-font-size);font-family:var(--font-inter);line-height:var(--line-height-text-s1);white-space:nowrap;-webkit-text-decoration:none;text-decoration:none;text-overflow:ellipsis;-moz-column-gap:var(--button-gap);column-gap:var(--button-gap);background:var(--button-bg-color);border:none;border-radius:var(--control-radius);cursor:pointer;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}._button_1hqwa_2:hover{color:var(--button-color-hover);background:var(--button-bg-color-hover)}._button_1hqwa_2:active{color:var(--button-color-active);background:var(--button-bg-color-active)}._button_1hqwa_2:focus{box-shadow:0 0 2px var(--sapphire-normal)}._button_1hqwa_2._clear_1hqwa_41:focus{box-shadow:none}._button_1hqwa_2 svg{color:currentcolor;fill:currentcolor}._button_1hqwa_2 svg path{color:currentcolor;fill:currentcolor}._xs_1hqwa_53{--button-height: var(--button-height-xs);--button-font-size: var(--control-text-size-xs);--button-space: var(--control-space-xs);--button-gap: 4px;--button-border-radius: var(--button-border-radius-s)}._s_1hqwa_61{--button-height: var(--button-height-s);--button-font-size: var(--control-text-size-s);--button-space: var(--control-space-s);--button-gap: 4px;--button-border-radius: var(--button-border-radius-s)}._m_1hqwa_69{--button-height: var(--button-height-m);--button-font-size: var(--control-text-size-m);--button-space: var(--control-space-m);--button-gap: 8px;--button-border-radius: var(--button-border-radius-m)}._l_1hqwa_77{--button-height: var(--button-height-l);--button-font-size: var(--control-text-size-l);--button-space: var(--control-space-l);--button-gap: 8px;--button-border-radius: var(--button-border-radius-l)}._xl_1hqwa_85{--button-height: var(--button-height-xl);--button-space: var(--control-space-l);--button-gap: 8px;--button-border-radius: var(--button-border-radius-l);font-weight:var(--font-weight-text-medium);font-size:var(--size-text-l)}._xxl_1hqwa_94{--button-height: var(--button-height-xxl);--button-space: var(--control-space-xxl);--button-border-radius: var(--button-border-radius-l);--button-gap: 8px;font-weight:var(--font-weight-text-medium);font-size:var(--size-text-l)}._default-button_1hqwa_103._primary-sapphire_1hqwa_103{--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_1hqwa_103._primary-citrine_1hqwa_112{--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_1hqwa_103._secondary-asphalt_1hqwa_121{--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_1hqwa_103._secondary-gray_1hqwa_130{--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_1hqwa_103._secondary-white_1hqwa_139{--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_1hqwa_103._secondary-red_1hqwa_148{--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_1hqwa_158{--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_1hqwa_158._black_1hqwa_165{--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_1hqwa_158._gray_1hqwa_174{--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_1hqwa_158._white_1hqwa_183{--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)}._full_1hqwa_193{display:block;width:100%}._disabled_1hqwa_198{--button-cursor: not-allowed;color:var(--light-text);background-color:var(--disabled)}._disabled_1hqwa_198:hover,._disabled_1hqwa_198:active,._disabled_1hqwa_198:focus{color:var(--light-text);background-color:var(--disabled);box-shadow:none}._icon-button_1hqwa_209{justify-content:center;min-width:var(--button-height);padding:0}
|
package/dist/assets/Input.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
._input-
|
|
1
|
+
._input-wrapper_1wv6m_2{position:relative}._input-wrapper_1wv6m_2 ._label_1wv6m_5{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;transform-origin:left center;transition:transform .15s ease-out,color .15s ease-out;pointer-events:none}._input-wrapper_1wv6m_2 ._label_1wv6m_5._active-label_1wv6m_18{transform:scale(var(--label-scaled)) translateY(calc(var(--input-font-size) * -1))}._input-wrapper_1wv6m_2:hover ._label_1wv6m_5,._input-wrapper_1wv6m_2:focus-within ._label_1wv6m_5{color:var(--label-color)}._input_1wv6m_2{--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;color:var(--dark-text);font-size:var(--input-font-size);font-family:var(--font-inter);line-height:var(--input-line-height);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);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;padding-left:var(--input-padding);padding-right:var(--input-padding);font-feature-settings:"zero"}._input_1wv6m_2:hover{color:var(--input-color-hover);background:var(--input-bg-color-hover)}._input_1wv6m_2:focus{color:var(--input-color-active);background-color:var(--input-bg-color-active);border-bottom:1px solid var(--input-bottom-color-active)}._s_1wv6m_61{--input-height: var(--space-xxl);--input-font-size: var(--control-text-size-m);--input-line-height: var(--line-height-text-xs);--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: .85;--label-spacing: var(--space-1xs)}._m_1wv6m_73{--input-height: var(--space-4xl);--input-font-size: var(--control-text-size-l);--input-line-height: var(--line-height-text-s1);--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: .75;--label-spacing: var(--space-xs)}._l_1wv6m_5{--input-height: var(--space-4xxl);--input-font-size: var(--control-text-size-2xl);--input-line-height: var(--line-height-text-l);--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_1wv6m_97{--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_1wv6m_109{--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(--black-60)}._default-white_1wv6m_109:hover{--label-color: var(--dark-text)}._success_1wv6m_124{--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_1wv6m_124::-moz-placeholder{color:var(--input-color)}._success_1wv6m_124::placeholder{color:var(--input-color)}._success_1wv6m_124:hover::-moz-placeholder{color:var(--input-color)}._success_1wv6m_124:hover::placeholder{color:var(--input-color)}._alarm_1wv6m_142{--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_1wv6m_142::-moz-placeholder{color:var(--input-color)}._alarm_1wv6m_142::placeholder{color:var(--input-color)}._alarm_1wv6m_142:hover::-moz-placeholder{color:var(--input-color)}._alarm_1wv6m_142:hover::placeholder{color:var(--input-color)}._error_1wv6m_160{--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_1wv6m_160::-moz-placeholder{color:var(--input-color)}._error_1wv6m_160::placeholder{color:var(--input-color)}._error_1wv6m_160:hover::-moz-placeholder{color:var(--input-color)}._error_1wv6m_160:hover::placeholder{color:var(--input-color)}._disabled_1wv6m_178{--input-cursor: not-allowed;color:var(--light-text);background-color:var(--black-20)}._disabled_1wv6m_178:hover,._disabled_1wv6m_178:active,._disabled_1wv6m_178:focus{color:var(--light-text);background-color:var(--black-20);border:none;box-shadow:none}._disabled_1wv6m_178::-moz-placeholder{color:var(--light-text)}._disabled_1wv6m_178::placeholder{color:var(--light-text)}._disabled_1wv6m_178:hover::-moz-placeholder{color:var(--light-text)}._disabled_1wv6m_178:hover::placeholder{color:var(--light-text)}._has-label_1wv6m_196{padding-top:var(--input-padding-position)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
._group_63bak_3{display:flex;flex-direction:column;--radio-disabled: #b2b2b2;--radio-bg-disabled: #e5e5e5;--radio-cursor: pointer}._content-wrapper_63bak_11{display:inline-flex;flex-direction:column;align-items:flex-start;row-gap:var(--space-xl)}._radio-wrapper_63bak_18{display:inline-flex;align-items:center;font-size:var(--size-text-l);line-height:var(--line-height-text-s1);-moz-column-gap:var(--space-xs);column-gap:var(--space-xs);cursor:var(--radio-cursor);--radio-bg-color: var(--sapphire-20)}._radio-wrapper_63bak_18 ._radio_63bak_18{position:relative;display:grid;width:24px;height:24px;background-color:var(--radio-bg-color);border-radius:50%;transition:all .2s ease;place-items:center}._radio-wrapper_63bak_18 ._radio_63bak_18:hover{--radio-bg-color: var(--sapphire-40)}._radio-wrapper_63bak_18 ._radio_63bak_18._disabled_63bak_40:hover{--radio-cursor: not-allowed;--radio-bg-color: var(--radio-bg-disabled)}._radio-wrapper_63bak_18:hover{--radio-bg-color: var(--sapphire-40)}._radio-wrapper_63bak_18:focus-within ._radio_63bak_18{box-shadow:var(--box-shadow-focus)}._label_63bak_51{font-size:var(--size-text-l);line-height:var(--line-height-text-s1)}._label_63bak_51:not(:last-child){margin-bottom:calc(var(--space-xl) + var(--space-3xs))}@media (max-width: 767px){._label_63bak_51{font-size:var(--size-text-m)}}._frame_63bak_64{position:absolute;z-index:5;display:block;border:var(--control-radius-s) solid transparent;border-radius:50%;cursor:var(--radio-cursor);top:0;right:0;bottom:0;left:0}._frame_63bak_64._checked_63bak_73{border:3px solid var(--sapphire-100)}._frame_63bak_64._checked_63bak_73._disabled_63bak_40{--radio-cursor: not-allowed;border-color:var(--radio-disabled)}._disabled_63bak_40,._disabled_63bak_40:hover{--radio-cursor: not-allowed;--radio-bg-color: var(--radio-bg-disabled)}._disabled_63bak_40:focus{--radio-cursor: not-allowed;--radio-bg-color: var(--radio-bg-disabled);box-shadow:none}._disabled_63bak_40:focus-within ._radio_63bak_18{--radio-cursor: not-allowed;--radio-bg-color: var(--radio-bg-disabled);box-shadow:none}
|
|
1
|
+
._group_63bak_3{display:flex;flex-direction:column;--radio-disabled: #b2b2b2;--radio-bg-disabled: #e5e5e5;--radio-cursor: pointer}._content-wrapper_63bak_11{display:inline-flex;flex-direction:column;align-items:flex-start;row-gap:var(--space-xl)}._radio-wrapper_63bak_18{display:inline-flex;align-items:center;font-size:var(--size-text-l);line-height:var(--line-height-text-s1);-moz-column-gap:var(--space-xs);column-gap:var(--space-xs);cursor:var(--radio-cursor);--radio-bg-color: var(--sapphire-20)}._radio-wrapper_63bak_18 ._radio_63bak_18{position:relative;display:grid;width:24px;height:24px;background-color:var(--radio-bg-color);border-radius:50%;transition:all .2s ease;align-items:center;justify-items:center;place-items:center}._radio-wrapper_63bak_18 ._radio_63bak_18:hover{--radio-bg-color: var(--sapphire-40)}._radio-wrapper_63bak_18 ._radio_63bak_18._disabled_63bak_40:hover{--radio-cursor: not-allowed;--radio-bg-color: var(--radio-bg-disabled)}._radio-wrapper_63bak_18:hover{--radio-bg-color: var(--sapphire-40)}._radio-wrapper_63bak_18:focus-within ._radio_63bak_18{box-shadow:var(--box-shadow-focus)}._label_63bak_51{font-size:var(--size-text-l);line-height:var(--line-height-text-s1)}._label_63bak_51:not(:last-child){margin-bottom:calc(var(--space-xl) + var(--space-3xs))}@media (max-width: 767px){._label_63bak_51{font-size:var(--size-text-m)}}._frame_63bak_64{position:absolute;z-index:5;display:block;border:var(--control-radius-s) solid transparent;border-radius:50%;cursor:var(--radio-cursor);top:0;right:0;bottom:0;left:0}._frame_63bak_64._checked_63bak_73{border:3px solid var(--sapphire-100)}._frame_63bak_64._checked_63bak_73._disabled_63bak_40{--radio-cursor: not-allowed;border-color:var(--radio-disabled)}._disabled_63bak_40,._disabled_63bak_40:hover{--radio-cursor: not-allowed;--radio-bg-color: var(--radio-bg-disabled)}._disabled_63bak_40:focus{--radio-cursor: not-allowed;--radio-bg-color: var(--radio-bg-disabled);box-shadow:none}._disabled_63bak_40:focus-within ._radio_63bak_18{--radio-cursor: not-allowed;--radio-bg-color: var(--radio-bg-disabled);box-shadow:none}
|
package/dist/assets/index.css
CHANGED
|
@@ -1 +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{background-color:transparent;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:
|
|
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{-webkit-text-decoration:none;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{background-color:transparent;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: rgba(255, 255, 255, .4);--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-s1: 1.25em;--line-height-text-m: 1.3em;--line-height-text-m1: 1.35em;--line-height-text-l: 1.4em;--line-height-text-l1: 1.45em;--line-height-text-xl: 1.5em;--line-height-text-xl1: 1.5em;--control-radius-s: 4px;--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);--box-shadow-focus: 0px 0px 10px 2px #1389cc}@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-feature-settings:"zero";font-variant-numeric:slashed-zero;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import { ComponentProps
|
|
2
|
-
import {
|
|
1
|
+
import { ComponentProps } from 'react';
|
|
2
|
+
import { TCommonButtonProps } from './types';
|
|
3
|
+
import { TIcon } from '../../icons';
|
|
3
4
|
|
|
4
|
-
export type TProps =
|
|
5
|
+
export type TProps = TCommonButtonProps & ComponentProps<'button'> & {
|
|
5
6
|
/**
|
|
6
7
|
* Класс, применяемый к корневому элементу кнопки.
|
|
7
8
|
*/
|
|
@@ -10,14 +11,6 @@ export type TProps = (TButtonDefaultFormProps | TButtonRoundFormProps) & Compone
|
|
|
10
11
|
* Флаг, указывающий, отключена ли кнопка.
|
|
11
12
|
*/
|
|
12
13
|
disabled?: boolean;
|
|
13
|
-
/**
|
|
14
|
-
* Иконка справа.
|
|
15
|
-
*/
|
|
16
|
-
rightIcon?: ReactNode;
|
|
17
|
-
/**
|
|
18
|
-
* Иконка слева.
|
|
19
|
-
*/
|
|
20
|
-
leftIcon?: ReactNode;
|
|
21
14
|
/**
|
|
22
15
|
* Флаг, указывающий, что кнопка занимает все доступное пространство.
|
|
23
16
|
*/
|
|
@@ -35,7 +28,12 @@ export type TProps = (TButtonDefaultFormProps | TButtonRoundFormProps) & Compone
|
|
|
35
28
|
* Компонент кнопки, который можно настраивать с различными темами и размерами.
|
|
36
29
|
|
|
37
30
|
*/
|
|
38
|
-
export declare const Button: import('react').ForwardRefExoticComponent<(Omit<
|
|
31
|
+
export declare const Button: import('react').ForwardRefExoticComponent<(Omit<import('./types').TButtonDefaultFormProps & {
|
|
32
|
+
isIconButton: true;
|
|
33
|
+
iconName: TIcon;
|
|
34
|
+
leftIcon?: never;
|
|
35
|
+
rightIcon?: never;
|
|
36
|
+
} & import('react').ClassAttributes<HTMLButtonElement> & import('react').ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
39
37
|
/**
|
|
40
38
|
* Класс, применяемый к корневому элементу кнопки.
|
|
41
39
|
*/
|
|
@@ -45,13 +43,31 @@ export declare const Button: import('react').ForwardRefExoticComponent<(Omit<TBu
|
|
|
45
43
|
*/
|
|
46
44
|
disabled?: boolean;
|
|
47
45
|
/**
|
|
48
|
-
*
|
|
46
|
+
* Флаг, указывающий, что кнопка занимает все доступное пространство.
|
|
47
|
+
*/
|
|
48
|
+
full?: boolean;
|
|
49
|
+
/**
|
|
50
|
+
* Флаг, отключащий абсолютно все модификации кнопки (variant, size).
|
|
51
|
+
*/
|
|
52
|
+
clear?: boolean;
|
|
53
|
+
/**
|
|
54
|
+
* Идентификатор формы, к которой привязана кнопка.
|
|
49
55
|
*/
|
|
50
|
-
|
|
56
|
+
formId?: string;
|
|
57
|
+
}, "ref"> | Omit<import('./types').TButtonDefaultFormProps & {
|
|
58
|
+
isIconButton?: false;
|
|
59
|
+
iconName?: never;
|
|
60
|
+
leftIcon?: import('react').ReactNode;
|
|
61
|
+
rightIcon?: import('react').ReactNode;
|
|
62
|
+
} & import('react').ClassAttributes<HTMLButtonElement> & import('react').ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
63
|
+
/**
|
|
64
|
+
* Класс, применяемый к корневому элементу кнопки.
|
|
65
|
+
*/
|
|
66
|
+
className?: string;
|
|
51
67
|
/**
|
|
52
|
-
*
|
|
68
|
+
* Флаг, указывающий, отключена ли кнопка.
|
|
53
69
|
*/
|
|
54
|
-
|
|
70
|
+
disabled?: boolean;
|
|
55
71
|
/**
|
|
56
72
|
* Флаг, указывающий, что кнопка занимает все доступное пространство.
|
|
57
73
|
*/
|
|
@@ -64,7 +80,12 @@ export declare const Button: import('react').ForwardRefExoticComponent<(Omit<TBu
|
|
|
64
80
|
* Идентификатор формы, к которой привязана кнопка.
|
|
65
81
|
*/
|
|
66
82
|
formId?: string;
|
|
67
|
-
}, "ref"> | Omit<
|
|
83
|
+
}, "ref"> | Omit<import('./types').TButtonRoundFormProps & {
|
|
84
|
+
isIconButton: true;
|
|
85
|
+
iconName: TIcon;
|
|
86
|
+
leftIcon?: never;
|
|
87
|
+
rightIcon?: never;
|
|
88
|
+
} & import('react').ClassAttributes<HTMLButtonElement> & import('react').ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
68
89
|
/**
|
|
69
90
|
* Класс, применяемый к корневому элементу кнопки.
|
|
70
91
|
*/
|
|
@@ -74,13 +95,31 @@ export declare const Button: import('react').ForwardRefExoticComponent<(Omit<TBu
|
|
|
74
95
|
*/
|
|
75
96
|
disabled?: boolean;
|
|
76
97
|
/**
|
|
77
|
-
*
|
|
98
|
+
* Флаг, указывающий, что кнопка занимает все доступное пространство.
|
|
99
|
+
*/
|
|
100
|
+
full?: boolean;
|
|
101
|
+
/**
|
|
102
|
+
* Флаг, отключащий абсолютно все модификации кнопки (variant, size).
|
|
103
|
+
*/
|
|
104
|
+
clear?: boolean;
|
|
105
|
+
/**
|
|
106
|
+
* Идентификатор формы, к которой привязана кнопка.
|
|
78
107
|
*/
|
|
79
|
-
|
|
108
|
+
formId?: string;
|
|
109
|
+
}, "ref"> | Omit<import('./types').TButtonRoundFormProps & {
|
|
110
|
+
isIconButton?: false;
|
|
111
|
+
iconName?: never;
|
|
112
|
+
leftIcon?: import('react').ReactNode;
|
|
113
|
+
rightIcon?: import('react').ReactNode;
|
|
114
|
+
} & import('react').ClassAttributes<HTMLButtonElement> & import('react').ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
80
115
|
/**
|
|
81
|
-
*
|
|
116
|
+
* Класс, применяемый к корневому элементу кнопки.
|
|
82
117
|
*/
|
|
83
|
-
|
|
118
|
+
className?: string;
|
|
119
|
+
/**
|
|
120
|
+
* Флаг, указывающий, отключена ли кнопка.
|
|
121
|
+
*/
|
|
122
|
+
disabled?: boolean;
|
|
84
123
|
/**
|
|
85
124
|
* Флаг, указывающий, что кнопка занимает все доступное пространство.
|
|
86
125
|
*/
|
|
@@ -1,20 +1,21 @@
|
|
|
1
|
-
import { jsxs } from "react/jsx-runtime";
|
|
1
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef } from "react";
|
|
3
3
|
import { c as classNames } from "../../index-CweZ_OcN.js";
|
|
4
4
|
import { EButtonVariantDefault, EButtonForm } from "./constants.js";
|
|
5
|
-
import
|
|
6
|
-
const
|
|
7
|
-
const
|
|
8
|
-
const
|
|
9
|
-
const
|
|
10
|
-
const
|
|
11
|
-
const
|
|
12
|
-
const
|
|
13
|
-
const
|
|
14
|
-
const
|
|
15
|
-
const
|
|
16
|
-
const
|
|
17
|
-
const
|
|
5
|
+
import { Icon } from "../../icons/Icon.js";
|
|
6
|
+
import '../../assets/Button.css';const button = "_button_1hqwa_2";
|
|
7
|
+
const clear = "_clear_1hqwa_41";
|
|
8
|
+
const xs = "_xs_1hqwa_53";
|
|
9
|
+
const s = "_s_1hqwa_61";
|
|
10
|
+
const m = "_m_1hqwa_69";
|
|
11
|
+
const l = "_l_1hqwa_77";
|
|
12
|
+
const xl = "_xl_1hqwa_85";
|
|
13
|
+
const xxl = "_xxl_1hqwa_94";
|
|
14
|
+
const black = "_black_1hqwa_165";
|
|
15
|
+
const gray = "_gray_1hqwa_174";
|
|
16
|
+
const white = "_white_1hqwa_183";
|
|
17
|
+
const full = "_full_1hqwa_193";
|
|
18
|
+
const disabled = "_disabled_1hqwa_198";
|
|
18
19
|
const cls = {
|
|
19
20
|
button,
|
|
20
21
|
clear,
|
|
@@ -24,19 +25,20 @@ const cls = {
|
|
|
24
25
|
l,
|
|
25
26
|
xl,
|
|
26
27
|
xxl,
|
|
27
|
-
"default-button": "_default-
|
|
28
|
-
"primary-sapphire": "_primary-
|
|
29
|
-
"primary-citrine": "_primary-
|
|
30
|
-
"secondary-asphalt": "_secondary-
|
|
31
|
-
"secondary-gray": "_secondary-
|
|
32
|
-
"secondary-white": "_secondary-
|
|
33
|
-
"secondary-red": "_secondary-
|
|
34
|
-
"round-button": "_round-
|
|
28
|
+
"default-button": "_default-button_1hqwa_103",
|
|
29
|
+
"primary-sapphire": "_primary-sapphire_1hqwa_103",
|
|
30
|
+
"primary-citrine": "_primary-citrine_1hqwa_112",
|
|
31
|
+
"secondary-asphalt": "_secondary-asphalt_1hqwa_121",
|
|
32
|
+
"secondary-gray": "_secondary-gray_1hqwa_130",
|
|
33
|
+
"secondary-white": "_secondary-white_1hqwa_139",
|
|
34
|
+
"secondary-red": "_secondary-red_1hqwa_148",
|
|
35
|
+
"round-button": "_round-button_1hqwa_158",
|
|
35
36
|
black,
|
|
36
37
|
gray,
|
|
37
38
|
white,
|
|
38
39
|
full,
|
|
39
|
-
disabled
|
|
40
|
+
disabled,
|
|
41
|
+
"icon-button": "_icon-button_1hqwa_209"
|
|
40
42
|
};
|
|
41
43
|
const Button = forwardRef(
|
|
42
44
|
(props, ref) => {
|
|
@@ -46,6 +48,8 @@ const Button = forwardRef(
|
|
|
46
48
|
form = EButtonForm.DefaultButton,
|
|
47
49
|
full: full2,
|
|
48
50
|
clear: clear2,
|
|
51
|
+
isIconButton = false,
|
|
52
|
+
iconName,
|
|
49
53
|
children,
|
|
50
54
|
className,
|
|
51
55
|
formId,
|
|
@@ -58,7 +62,8 @@ const Button = forwardRef(
|
|
|
58
62
|
[cls.full]: full2 && !clear2,
|
|
59
63
|
[cls.disabled]: disabled2 && !clear2,
|
|
60
64
|
[cls.clear]: clear2,
|
|
61
|
-
[cls[variant ?? ""]]: !disabled2 || clear2
|
|
65
|
+
[cls[variant ?? ""]]: !disabled2 || clear2,
|
|
66
|
+
[cls["icon-button"]]: isIconButton
|
|
62
67
|
};
|
|
63
68
|
const buttonClassNames = classNames(
|
|
64
69
|
cls.button,
|
|
@@ -76,7 +81,7 @@ const Button = forwardRef(
|
|
|
76
81
|
className: buttonClassNames,
|
|
77
82
|
children: [
|
|
78
83
|
leftIcon,
|
|
79
|
-
children,
|
|
84
|
+
isIconButton ? /* @__PURE__ */ jsx(Icon, { iconName }) : children,
|
|
80
85
|
rightIcon
|
|
81
86
|
]
|
|
82
87
|
}
|
|
@@ -1,4 +1,6 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
1
2
|
import { EButtonSize, EButtonVariantDefault, EButtonVariantRound, EButtonForm } from './constants';
|
|
3
|
+
import { TIcon } from '../../icons';
|
|
2
4
|
|
|
3
5
|
type TButtonRoundFormSize = Exclude<EButtonSize, 'xxl'> & Exclude<EButtonSize, 'xl'>;
|
|
4
6
|
export type TButtonDefaultFormProps = {
|
|
@@ -11,4 +13,16 @@ export type TButtonRoundFormProps = {
|
|
|
11
13
|
variant?: EButtonVariantRound | `${EButtonVariantRound}`;
|
|
12
14
|
size?: TButtonRoundFormSize | `${TButtonRoundFormSize}`;
|
|
13
15
|
};
|
|
16
|
+
export type TButtonIsIconProps = {
|
|
17
|
+
isIconButton: true;
|
|
18
|
+
iconName: TIcon;
|
|
19
|
+
leftIcon?: never;
|
|
20
|
+
rightIcon?: never;
|
|
21
|
+
} | {
|
|
22
|
+
isIconButton?: false;
|
|
23
|
+
iconName?: never;
|
|
24
|
+
leftIcon?: ReactNode;
|
|
25
|
+
rightIcon?: ReactNode;
|
|
26
|
+
};
|
|
27
|
+
export type TCommonButtonProps = (TButtonDefaultFormProps | TButtonRoundFormProps) & TButtonIsIconProps;
|
|
14
28
|
export {};
|
|
@@ -2,30 +2,30 @@ import { jsxs, jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { memo, forwardRef, useState, useEffect } from "react";
|
|
3
3
|
import { c as classNames } from "../../index-CweZ_OcN.js";
|
|
4
4
|
import { EInputVariant } from "./constants.js";
|
|
5
|
-
import '../../assets/Input.css';const label = "
|
|
6
|
-
const input = "
|
|
7
|
-
const s = "
|
|
8
|
-
const m = "
|
|
9
|
-
const l = "
|
|
10
|
-
const success = "
|
|
11
|
-
const alarm = "
|
|
12
|
-
const error = "
|
|
13
|
-
const disabled = "
|
|
5
|
+
import '../../assets/Input.css';const label = "_label_1wv6m_5";
|
|
6
|
+
const input = "_input_1wv6m_2";
|
|
7
|
+
const s = "_s_1wv6m_61";
|
|
8
|
+
const m = "_m_1wv6m_73";
|
|
9
|
+
const l = "_l_1wv6m_5";
|
|
10
|
+
const success = "_success_1wv6m_124";
|
|
11
|
+
const alarm = "_alarm_1wv6m_142";
|
|
12
|
+
const error = "_error_1wv6m_160";
|
|
13
|
+
const disabled = "_disabled_1wv6m_178";
|
|
14
14
|
const cls = {
|
|
15
|
-
"input-wrapper": "_input-
|
|
15
|
+
"input-wrapper": "_input-wrapper_1wv6m_2",
|
|
16
16
|
label,
|
|
17
|
-
"active-label": "_active-
|
|
17
|
+
"active-label": "_active-label_1wv6m_18",
|
|
18
18
|
input,
|
|
19
19
|
s,
|
|
20
20
|
m,
|
|
21
21
|
l,
|
|
22
|
-
"default-gray": "_default-
|
|
23
|
-
"default-white": "_default-
|
|
22
|
+
"default-gray": "_default-gray_1wv6m_97",
|
|
23
|
+
"default-white": "_default-white_1wv6m_109",
|
|
24
24
|
success,
|
|
25
25
|
alarm,
|
|
26
26
|
error,
|
|
27
27
|
disabled,
|
|
28
|
-
"has-label": "_has-
|
|
28
|
+
"has-label": "_has-label_1wv6m_196"
|
|
29
29
|
};
|
|
30
30
|
const Input = memo(
|
|
31
31
|
forwardRef(
|
|
@@ -6,7 +6,7 @@ import { TInputProps } from '../Input';
|
|
|
6
6
|
* Компонент представляет собой набор вводов, каждый из которых может содержать только цифры.
|
|
7
7
|
* Пользователь может вводить цифры в каждый ввод, и при вводе каждой цифры происходит автоматическое переключение на следующий ввод.
|
|
8
8
|
*/
|
|
9
|
-
export declare const OtpInput: import('react').ForwardRefExoticComponent<Omit<TInputProps, "
|
|
9
|
+
export declare const OtpInput: import('react').ForwardRefExoticComponent<Omit<TInputProps, "onChange" | "label"> & {
|
|
10
10
|
value?: string;
|
|
11
11
|
/**
|
|
12
12
|
* Количество полей ввода.
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { forwardRef,
|
|
2
|
+
import { forwardRef, useImperativeHandle, Fragment } from "react";
|
|
3
3
|
import { c as classNames } from "../../index-CweZ_OcN.js";
|
|
4
4
|
import { Input } from "../Input/Input.js";
|
|
5
|
-
import {
|
|
5
|
+
import { ITEMS_PER_SEPARATOR, DEFAULT_VALUE_LENGTH } from "./constants.js";
|
|
6
|
+
import { useOTPInput } from "./hooks.js";
|
|
6
7
|
import '../../assets/OtpInput.css';const otp = "_otp_xwv60_3";
|
|
7
8
|
const input = "_input_xwv60_15";
|
|
8
9
|
const separator = "_separator_xwv60_29";
|
|
@@ -21,94 +22,20 @@ const OtpInput = forwardRef(
|
|
|
21
22
|
className,
|
|
22
23
|
...props
|
|
23
24
|
}, ref) => {
|
|
24
|
-
const
|
|
25
|
+
const {
|
|
26
|
+
data: { inputRefs, valueItems },
|
|
27
|
+
handlers: { handleChange, handleFocus, handleKeyDown, handlePaste }
|
|
28
|
+
} = useOTPInput({
|
|
29
|
+
onChange,
|
|
30
|
+
value,
|
|
31
|
+
valueLength
|
|
32
|
+
});
|
|
25
33
|
useImperativeHandle(ref, () => ({
|
|
26
34
|
focus: () => {
|
|
27
35
|
var _a;
|
|
28
36
|
(_a = inputRefs.current[0]) == null ? void 0 : _a.focus();
|
|
29
37
|
}
|
|
30
38
|
}));
|
|
31
|
-
const valueItems = useMemo(() => {
|
|
32
|
-
const valueArray = value.split("");
|
|
33
|
-
const items = [];
|
|
34
|
-
for (let i = 0; i < valueLength; i++) {
|
|
35
|
-
const char = valueArray[i];
|
|
36
|
-
if (RE_DIGIT.test(char)) {
|
|
37
|
-
items.push(char);
|
|
38
|
-
} else {
|
|
39
|
-
items.push("");
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
return items;
|
|
43
|
-
}, [value, valueLength]);
|
|
44
|
-
const handleFocusToNextInput = (index) => {
|
|
45
|
-
var _a;
|
|
46
|
-
if (index < valueLength - 1) {
|
|
47
|
-
(_a = inputRefs.current[index + 1]) == null ? void 0 : _a.focus();
|
|
48
|
-
}
|
|
49
|
-
};
|
|
50
|
-
const handleFocusToPrevInput = (index) => {
|
|
51
|
-
var _a;
|
|
52
|
-
if (index > 0) {
|
|
53
|
-
(_a = inputRefs.current[index - 1]) == null ? void 0 : _a.focus();
|
|
54
|
-
}
|
|
55
|
-
};
|
|
56
|
-
const handleChange = (e, index) => {
|
|
57
|
-
const target = e.target;
|
|
58
|
-
let targetValue = target.value.trim();
|
|
59
|
-
const isTargetValueDigit = RE_DIGIT.test(targetValue);
|
|
60
|
-
if (!isTargetValueDigit && targetValue !== "") {
|
|
61
|
-
return;
|
|
62
|
-
}
|
|
63
|
-
const nextInputEl = inputRefs.current[index + 1];
|
|
64
|
-
if (!isTargetValueDigit && nextInputEl && nextInputEl.value !== "") {
|
|
65
|
-
return;
|
|
66
|
-
}
|
|
67
|
-
targetValue = isTargetValueDigit ? targetValue.trim() : " ";
|
|
68
|
-
const targetValueLength = targetValue.length;
|
|
69
|
-
if (targetValueLength === 1) {
|
|
70
|
-
const newValue = value.substring(0, index) + targetValue + value.substring(index + 1);
|
|
71
|
-
onChange == null ? void 0 : onChange(newValue.trim());
|
|
72
|
-
if (isTargetValueDigit) {
|
|
73
|
-
handleFocusToNextInput(index);
|
|
74
|
-
}
|
|
75
|
-
} else if (targetValueLength === valueLength) {
|
|
76
|
-
onChange == null ? void 0 : onChange(targetValue.trim());
|
|
77
|
-
target.blur();
|
|
78
|
-
}
|
|
79
|
-
};
|
|
80
|
-
const handleKeyDown = (e, index) => {
|
|
81
|
-
const { key } = e;
|
|
82
|
-
const target = e.target;
|
|
83
|
-
switch (key) {
|
|
84
|
-
case "ArrowRight":
|
|
85
|
-
case "ArrowDown": {
|
|
86
|
-
e.preventDefault();
|
|
87
|
-
return handleFocusToNextInput(index);
|
|
88
|
-
}
|
|
89
|
-
case "ArrowLeft":
|
|
90
|
-
case "ArrowUp": {
|
|
91
|
-
e.preventDefault();
|
|
92
|
-
return handleFocusToPrevInput(index);
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
const targetValue = target.value.trim();
|
|
96
|
-
target.setSelectionRange(0, targetValue.length);
|
|
97
|
-
if (e.key !== "Backspace" || targetValue !== "") {
|
|
98
|
-
return;
|
|
99
|
-
}
|
|
100
|
-
const newValue = `${value.substring(0, index - 1)} ${value.substring(index)}`;
|
|
101
|
-
onChange == null ? void 0 : onChange(newValue.trim());
|
|
102
|
-
handleFocusToPrevInput(index);
|
|
103
|
-
};
|
|
104
|
-
const handleFocus = (e, index) => {
|
|
105
|
-
const target = e.target;
|
|
106
|
-
const prevInputEl = inputRefs.current[index - 1];
|
|
107
|
-
if (prevInputEl && prevInputEl.value === "") {
|
|
108
|
-
prevInputEl.focus();
|
|
109
|
-
}
|
|
110
|
-
target.setSelectionRange(0, target.value.length);
|
|
111
|
-
};
|
|
112
39
|
return /* @__PURE__ */ jsx("div", { className: classNames(cls.otp, className), children: valueItems.map((digit, idx) => {
|
|
113
40
|
const nextIndex = idx + 1;
|
|
114
41
|
const showSeparator = needSeparator && nextIndex % ITEMS_PER_SEPARATOR === 0 && nextIndex !== valueItems.length;
|
|
@@ -128,6 +55,7 @@ const OtpInput = forwardRef(
|
|
|
128
55
|
onChange: (e) => handleChange(e, idx),
|
|
129
56
|
onKeyDown: (e) => handleKeyDown(e, idx),
|
|
130
57
|
onFocus: (e) => handleFocus(e, idx),
|
|
58
|
+
onPaste: handlePaste,
|
|
131
59
|
...props
|
|
132
60
|
}
|
|
133
61
|
),
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { ChangeEvent, KeyboardEvent, ClipboardEvent, FocusEvent } from 'react';
|
|
2
|
+
|
|
3
|
+
type TUseOTPInput = {
|
|
4
|
+
value?: string;
|
|
5
|
+
valueLength?: number;
|
|
6
|
+
onChange?: (value: string) => void;
|
|
7
|
+
};
|
|
8
|
+
export declare const useOTPInput: ({ value, valueLength, onChange }: TUseOTPInput) => {
|
|
9
|
+
handlers: {
|
|
10
|
+
handleChange: (e: ChangeEvent<HTMLInputElement>, index: number) => void;
|
|
11
|
+
handleFocus: (e: FocusEvent<HTMLInputElement>, index: number) => void;
|
|
12
|
+
handleKeyDown: (e: KeyboardEvent<HTMLInputElement>, index: number) => void;
|
|
13
|
+
handlePaste: (e: ClipboardEvent<HTMLInputElement>) => void;
|
|
14
|
+
};
|
|
15
|
+
data: {
|
|
16
|
+
valueItems: string[];
|
|
17
|
+
inputRefs: import('react').MutableRefObject<(HTMLInputElement | null)[]>;
|
|
18
|
+
};
|
|
19
|
+
};
|
|
20
|
+
export {};
|
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
import { useRef, useMemo, useCallback } from "react";
|
|
2
|
+
import { RE_DIGIT } from "./constants.js";
|
|
3
|
+
const useOTPInput = ({
|
|
4
|
+
value = "",
|
|
5
|
+
valueLength = 6,
|
|
6
|
+
onChange
|
|
7
|
+
}) => {
|
|
8
|
+
const inputRefs = useRef([]);
|
|
9
|
+
const valueItems = useMemo(() => {
|
|
10
|
+
const valueArray = value.split("");
|
|
11
|
+
const items = [];
|
|
12
|
+
for (let i = 0; i < valueLength; i++) {
|
|
13
|
+
const char = valueArray[i];
|
|
14
|
+
if (RE_DIGIT.test(char)) {
|
|
15
|
+
items.push(char);
|
|
16
|
+
} else {
|
|
17
|
+
items.push("");
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
return items;
|
|
21
|
+
}, [value, valueLength]);
|
|
22
|
+
const handleFocusToNextInput = useCallback(
|
|
23
|
+
(index) => {
|
|
24
|
+
var _a;
|
|
25
|
+
if (index < valueLength - 1) {
|
|
26
|
+
(_a = inputRefs.current[index + 1]) == null ? void 0 : _a.focus();
|
|
27
|
+
}
|
|
28
|
+
},
|
|
29
|
+
[valueLength]
|
|
30
|
+
);
|
|
31
|
+
const handleFocusToPrevInput = useCallback((index) => {
|
|
32
|
+
var _a;
|
|
33
|
+
if (index > 0) {
|
|
34
|
+
(_a = inputRefs.current[index - 1]) == null ? void 0 : _a.focus();
|
|
35
|
+
}
|
|
36
|
+
}, []);
|
|
37
|
+
const handleChange = useCallback(
|
|
38
|
+
(e, index) => {
|
|
39
|
+
const target = e.target;
|
|
40
|
+
let targetValue = target.value.trim();
|
|
41
|
+
const isTargetValueDigit = RE_DIGIT.test(targetValue);
|
|
42
|
+
if (!isTargetValueDigit && targetValue !== "") {
|
|
43
|
+
return;
|
|
44
|
+
}
|
|
45
|
+
const nextInputEl = inputRefs.current[index + 1];
|
|
46
|
+
if (!isTargetValueDigit && nextInputEl && nextInputEl.value !== "") {
|
|
47
|
+
return;
|
|
48
|
+
}
|
|
49
|
+
targetValue = isTargetValueDigit ? targetValue.trim() : " ";
|
|
50
|
+
const targetValueLength = targetValue.length;
|
|
51
|
+
if (targetValueLength === 1) {
|
|
52
|
+
const newValue = value.substring(0, index) + targetValue + value.substring(index + 1);
|
|
53
|
+
onChange == null ? void 0 : onChange(newValue.trim());
|
|
54
|
+
if (isTargetValueDigit) {
|
|
55
|
+
handleFocusToNextInput(index);
|
|
56
|
+
}
|
|
57
|
+
} else if (targetValueLength === valueLength) {
|
|
58
|
+
onChange == null ? void 0 : onChange(targetValue.trim());
|
|
59
|
+
target.blur();
|
|
60
|
+
}
|
|
61
|
+
},
|
|
62
|
+
[handleFocusToNextInput, onChange, value, valueLength]
|
|
63
|
+
);
|
|
64
|
+
const handleKeyDown = useCallback(
|
|
65
|
+
(e, index) => {
|
|
66
|
+
const { key } = e;
|
|
67
|
+
const target = e.target;
|
|
68
|
+
switch (key) {
|
|
69
|
+
case "ArrowRight":
|
|
70
|
+
case "ArrowDown": {
|
|
71
|
+
e.preventDefault();
|
|
72
|
+
return handleFocusToNextInput(index);
|
|
73
|
+
}
|
|
74
|
+
case "ArrowLeft":
|
|
75
|
+
case "ArrowUp": {
|
|
76
|
+
e.preventDefault();
|
|
77
|
+
return handleFocusToPrevInput(index);
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
const targetValue = target.value.trim();
|
|
81
|
+
target.setSelectionRange(0, targetValue.length);
|
|
82
|
+
if (e.key !== "Backspace" || targetValue !== "") {
|
|
83
|
+
return;
|
|
84
|
+
}
|
|
85
|
+
const newValue = `${value.substring(0, index - 1)} ${value.substring(index)}`;
|
|
86
|
+
onChange == null ? void 0 : onChange(newValue.trim());
|
|
87
|
+
handleFocusToPrevInput(index);
|
|
88
|
+
},
|
|
89
|
+
[handleFocusToNextInput, handleFocusToPrevInput, onChange, value]
|
|
90
|
+
);
|
|
91
|
+
const handleFocus = useCallback(
|
|
92
|
+
(e, index) => {
|
|
93
|
+
const target = e.target;
|
|
94
|
+
const prevInputEl = inputRefs.current[index - 1];
|
|
95
|
+
if (prevInputEl && prevInputEl.value === "") {
|
|
96
|
+
prevInputEl.focus();
|
|
97
|
+
}
|
|
98
|
+
target.setSelectionRange(0, target.value.length);
|
|
99
|
+
},
|
|
100
|
+
[]
|
|
101
|
+
);
|
|
102
|
+
const handlePaste = useCallback(
|
|
103
|
+
(e) => {
|
|
104
|
+
e.preventDefault();
|
|
105
|
+
const pasteData = e.clipboardData.getData("text");
|
|
106
|
+
if (RE_DIGIT.test(pasteData)) {
|
|
107
|
+
const pastedValue = pasteData.slice(0, valueLength);
|
|
108
|
+
const newValue = pastedValue.padEnd(valueLength, " ");
|
|
109
|
+
onChange == null ? void 0 : onChange(newValue.trim());
|
|
110
|
+
}
|
|
111
|
+
},
|
|
112
|
+
[onChange, valueLength]
|
|
113
|
+
);
|
|
114
|
+
return useMemo(
|
|
115
|
+
() => ({
|
|
116
|
+
handlers: {
|
|
117
|
+
handleChange,
|
|
118
|
+
handleFocus,
|
|
119
|
+
handleKeyDown,
|
|
120
|
+
handlePaste
|
|
121
|
+
},
|
|
122
|
+
data: {
|
|
123
|
+
valueItems,
|
|
124
|
+
inputRefs
|
|
125
|
+
}
|
|
126
|
+
}),
|
|
127
|
+
[
|
|
128
|
+
handleChange,
|
|
129
|
+
handleFocus,
|
|
130
|
+
handleKeyDown,
|
|
131
|
+
handlePaste,
|
|
132
|
+
valueItems,
|
|
133
|
+
inputRefs
|
|
134
|
+
]
|
|
135
|
+
);
|
|
136
|
+
};
|
|
137
|
+
export {
|
|
138
|
+
useOTPInput
|
|
139
|
+
};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "mimir-ui-kit",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "1.1.
|
|
4
|
+
"version": "1.1.4",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"exports": {
|
|
7
7
|
".": {
|
|
@@ -19,6 +19,9 @@
|
|
|
19
19
|
"./icons": {
|
|
20
20
|
"types": "./dist/icons/index.d.ts",
|
|
21
21
|
"default": "./dist/icons/index.js"
|
|
22
|
+
},
|
|
23
|
+
"./styles": {
|
|
24
|
+
"default": "./dist/assets/index.css"
|
|
22
25
|
}
|
|
23
26
|
},
|
|
24
27
|
"module": "./dist/index.js",
|
|
@@ -77,6 +80,7 @@
|
|
|
77
80
|
"husky": "^9.0.11",
|
|
78
81
|
"lint-staged": "^15.2.7",
|
|
79
82
|
"p-limit": "^6.1.0",
|
|
83
|
+
"postcss-preset-env": "^9.6.0",
|
|
80
84
|
"prettier": "^3.3.3",
|
|
81
85
|
"react": "^18.3.1",
|
|
82
86
|
"react-dom": "^18.3.1",
|