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.
Files changed (59) hide show
  1. package/dist/{index4.css → assets/Button.css} +1 -1
  2. package/dist/assets/Input.css +1 -0
  3. package/dist/assets/InputPassword.css +1 -0
  4. package/dist/assets/OtpInput.css +1 -0
  5. package/dist/assets/index.css +1 -0
  6. package/dist/components/Button/Button.d.ts +84 -0
  7. package/dist/components/Button/Button.js +86 -0
  8. package/dist/components/Button/constants.js +33 -5
  9. package/dist/components/Button/index.d.ts +2 -84
  10. package/dist/components/Button/index.js +7 -51
  11. package/dist/components/Button/types.d.ts +2 -2
  12. package/dist/components/Input/Input.d.ts +63 -0
  13. package/dist/components/Input/Input.js +109 -0
  14. package/dist/components/Input/constants.js +16 -3
  15. package/dist/components/Input/index.d.ts +3 -29
  16. package/dist/components/Input/index.js +5 -59
  17. package/dist/components/Input/types.d.ts +11 -0
  18. package/dist/components/Input/types.js +1 -0
  19. package/dist/components/InputPassword/InputPassword.d.ts +12 -0
  20. package/dist/components/InputPassword/InputPassword.js +38 -0
  21. package/dist/components/InputPassword/index.d.ts +2 -306
  22. package/dist/components/InputPassword/index.js +2 -20
  23. package/dist/components/InputPhoneNumber/InputPhoneNumber.d.ts +12 -0
  24. package/dist/components/InputPhoneNumber/InputPhoneNumber.js +38 -0
  25. package/dist/components/InputPhoneNumber/index.d.ts +1 -306
  26. package/dist/components/InputPhoneNumber/index.js +2 -26
  27. package/dist/components/InputPhoneNumber/utils.js +24 -7
  28. package/dist/components/OtpInput/OtpInput.d.ts +28 -0
  29. package/dist/components/OtpInput/OtpInput.js +133 -0
  30. package/dist/components/OtpInput/constants.d.ts +1 -0
  31. package/dist/components/OtpInput/constants.js +6 -3
  32. package/dist/components/OtpInput/index.d.ts +1 -18
  33. package/dist/components/OtpInput/index.js +2 -85
  34. package/dist/components/icons/Eye.js +31 -20
  35. package/dist/components/icons/index.js +2 -2
  36. package/dist/components/index.d.ts +4 -4
  37. package/dist/components/index.js +18 -18
  38. package/dist/hooks/index.js +4 -4
  39. package/dist/hooks/useMediaQuery/constants.js +9 -2
  40. package/dist/hooks/useMediaQuery/index.js +4 -4
  41. package/dist/hooks/useMediaQuery/useMediaQuery.js +13 -10
  42. package/dist/index-CweZ_OcN.js +65 -0
  43. package/dist/index.d.ts +1 -1
  44. package/dist/index.js +23 -25
  45. package/package.json +91 -91
  46. package/dist/assets/styles/index.css +0 -1
  47. package/dist/components/Button/Button.stories.d.ts +0 -67
  48. package/dist/components/Input/Input.stories.d.ts +0 -13
  49. package/dist/components/InputPassword/Input.stories.d.ts +0 -7
  50. package/dist/components/InputPhoneNumber/Input.stories.d.ts +0 -335
  51. package/dist/components/OtpInput/Input.stories.d.ts +0 -26
  52. package/dist/index-DIxK0V-G.js +0 -44
  53. package/dist/index.css +0 -1
  54. package/dist/index2.css +0 -1
  55. package/dist/index3.css +0 -1
  56. package/dist/utils/getLog.d.ts +0 -1
  57. package/dist/utils/getLog.js +0 -4
  58. package/dist/utils/index.d.ts +0 -1
  59. package/dist/utils/index.js +0 -4
@@ -1 +1 @@
1
- ._button_1yux6_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_1yux6_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_1yux6_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_1yux6_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_1yux6_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_1yux6_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_1yux6_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_1yux6_78._primary-sapphire_1yux6_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_1yux6_78._primary-citrine_1yux6_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_1yux6_78._secondary-asphalt_1yux6_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_1yux6_78._secondary-gray_1yux6_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_1yux6_78._secondary-white_1yux6_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_1yux6_78._secondary-red_1yux6_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_1yux6_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_1yux6_133._black_1yux6_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_1yux6_133._gray_1yux6_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_1yux6_133._white_1yux6_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_1yux6_1:hover{color:var(--button-color-hover);background:var(--button-bg-color-hover)}._button_1yux6_1:active{color:var(--button-color-active);background:var(--button-bg-color-active)}._button_1yux6_1:focus{box-shadow:0 0 2px var(--sapphire-normal)}._full_1yux6_182{width:100%}._disabled_1yux6_186{--button-cursor: not-allowed;color:var(--light-text);background-color:var(--disabled)}._disabled_1yux6_186:hover,._disabled_1yux6_186:active,._disabled_1yux6_186:focus{color:var(--light-text);background-color:var(--disabled);box-shadow:none}._right-icon_1yux6_197,._left-icon_1yux6_198{align-self:center}._right-icon_1yux6_197{margin-left:var(--button-margin-icon)}._left-icon_1yux6_198{margin-right:var(--button-margin-icon)}
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 y = /* @__PURE__ */ ((r) => (r.PrimarySapphire = "primary-sapphire", r.PrimaryCitrine = "primary-citrine", r.SecondaryAsphalt = "secondary-asphalt", r.SecondaryGray = "secondary-gray", r.SecondaryWhite = "secondary-white", r.SecondaryRed = "secondary-red", r))(y || {}), e = /* @__PURE__ */ ((r) => (r.Black = "black", r.Gray = "gray", r.White = "white", r))(e || {}), c = /* @__PURE__ */ ((r) => (r.XS = "xs", r.S = "s", r.M = "m", r.L = "l", r.XL = "xl", r.XXL = "xxl", r))(c || {}), d = /* @__PURE__ */ ((r) => (r.DefaultButton = "default-button", r.RoundButton = "round-button", r))(d || {});
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
- d as EButtonForm,
4
- c as EButtonSize,
5
- y as EButtonVariantDefault,
6
- e as EButtonVariantRound
31
+ EButtonForm,
32
+ EButtonSize,
33
+ EButtonVariantDefault,
34
+ EButtonVariantRound
7
35
  };
@@ -1,84 +1,2 @@
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>>;
1
+ export { Button, type TProps as TButtonProps } from './Button';
2
+ export { EButtonForm, EButtonSize, EButtonVariantDefault, EButtonVariantRound } from './constants';
@@ -1,53 +1,9 @@
1
- import { jsxs as f, jsx as a } from "react/jsx-runtime";
2
- import { forwardRef as p } from "react";
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
- F as Button
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: EButtonForm.DefaultButton;
5
+ form?: EButtonForm.DefaultButton;
6
6
  variant?: EButtonVariantDefault | `${EButtonVariantDefault}`;
7
7
  size?: EButtonSize | `${EButtonSize}`;
8
8
  };
9
9
  export type TButtonRoundFormProps = {
10
- form: EButtonForm.RoundButton;
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 e = /* @__PURE__ */ ((r) => (r.Alarm = "alarm", r.Success = "success", r.Error = "error", r.DefaultGray = "default-gray", r.DefaultWhite = "default-white", r))(e || {}), l = /* @__PURE__ */ ((r) => (r.S = "s", r.M = "m", r.L = "l", r))(l || {});
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
- l as EInputSize,
4
- e as EInputVariant
16
+ EInputSize,
17
+ EInputVariant
5
18
  };